Redirect и Routing в React

Question

Redirect и Routing в React

Рейтинг: 1Ответов: 2Опубликовано: 18.01.2023

У пытаюсь написать веб чат. Пока-что у меня 2 компонента, main компонент и signup комопонент. Мне надо что б signup компонент отображался первым если человек впервые заходит на сайт. Как в мессенджерах, сперва должен зарегистрироваться, у тебя открываеться signup страница и только после регистрации открываеться main компонент. Также я использую React Router

Мой код в App.tsx:

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import './App.css';
import Signup from './components/signup/signup';
import Main from './components/main/main';

function App() {
  return (
    <Routes>
       <Route path='/' element={<Main />} />
       <Route path='signup' element={<Signup />} />
    </Routes>
  );
}

export default App;

reactjs typescript redirect react-router

Источник: Stack Overflow на русском

Answer 1

▲ 1

Как в мессенджерах, сперва должен зарегистрироваться, у тебя открываеться signup страница и только после регистрации открываеться main компонент.

Как иллюстрацию, могу предложить вот такую конструкцию редиректа.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Routes, Route, useNavigate } from 'react-router-dom'
 
function App() {
    
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Main />} />
                <Route path="/signup" element={<Signup />} />
            </Routes>
        </BrowserRouter>
    )
}

//
function Signup() {
    return <p>Signup</p>
}

//
function Main() {
    const navigate = useNavigate()
    // Эта переменная будет отвечать за авторизован или нет (пока не авторизован)
    const ok = false
    React.useEffect(_ => {
        if (!ok) navigate('/signup')
    }, [ok])
        
    return <p>Main</p>
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Answer 2

▲ 1

Для вывода одного из двух компонентов, я бы не стал использовать route, а воспользовался бы условным рендерингом

function App() {
  function checkAuth() {
    // Проверяем, авторизрован ли пользователь
    return result; // true / false
  }
  return (
    <>
      {checkAuth() ? <Main /> : <Signup />}
    </>
  );
}

Redirect и Routing в React

Ответы