Редирект на страницу, если роутер частный

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

У меня есть файл App.js в котором есть роуты. Так же есть переменная getAuth - которая хранит булевое значение. True - человек авторизовн False - не авторизован

Дальше я проверяю эту переменную и если она true то вывожу те роуты которые разрешы, если false то другие. Теперь если я вручную введу в поиске роутер который мне не разрешен, меня как бы перекидывает на тот роутер, но содержание страницы нет, а в строке так и остается ссылка которая мне не разрешена. Как сделать, чтобы роутеры которые не разрешены,перекидывало на отдельную страницу и можно ли сделать так чтобы я мог сам определять куда перекидывать если роутер не разрешен?

const App = observer(() => {
  let getAuth = false;

  return (
    <>
      <AppBar variant="outlined">
        {getAuth ? (
          <Toolbar>
            <Typography sx={{ paddingLeft: 5 }}>
              <Link to="/">Главная</Link>
            </Typography>
            <Typography sx={{ paddingLeft: 5 }}>
              <Link to="/profile">Профиль</Link>
            </Typography>
            {/* <Typography sx={{paddingLeft:5}}><Button onClick={()=>logout()}>Выйти</Button></Typography> */}
          </Toolbar>
        ) : (
          <Toolbar>
            <Typography sx={{ paddingLeft: 5 }}>
              <Link to="/">Главная</Link>
            </Typography>
            <Typography sx={{ paddingLeft: 5 }}>
              <Link to="/login">Логин</Link>
            </Typography>
            <Typography sx={{ paddingLeft: 5 }}>
              <Link to="/register">Регистрация</Link>
            </Typography>
          </Toolbar>
        )}
      </AppBar>
      {getAuth ? (
        <Routes>
          <Route path="/" />
          <Route path="/profile" element={<Profile />} />
        </Routes>
      ) : (
        <Routes>
          <Route path="/login" element={<Login />} />
          <Route path="/register" element={<Register />} />
        </Routes>
      )}
      {/* <Header/> */}
    </>
  );
});

export default App;
reactjs react-router
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Можно проверять в самом элементе, разрешён ли данный роут или нет ( а не строить цепочки из тернарников ).

А для программного редиректа можно использовать useHistory() ( для React-Router v5 ):

import { useEffect } from "react";
import { useHistory } from "react-router-dom";

const someSecretPage = () => {
    const history = useHistory();

    // где-то из состояния получается getAuth

    // Без useEffect будет ругаться, что перенаправляем ещё до того, как компонент отрендериться
    useEffect(() => {
        if(!getAuth) {
            history.push("/redirect")
        }
    })

    if(!getAuth) {
        return null;
    }

    return /* ... */
}

или useNavigate() ( для React-Router v6 ):

import { useEffect } from "react";
import { useNavigate } from "react-router-dom";

const someSecretPage = () => {
    const navigate = useNavigate();

    // где-то из состояния получается getAuth
   
    // Без useEffect будет ругаться, что перенаправляем ещё до того, как компонент отрендериться
    useEffect(() => {
        if(!getAuth) {
            navigate("/redirect")
        }
    })

    if(!getAuth) {
        return null;
    }

    return /* ... */
}

Там же определяете, куда перенаправлять, если нужно ( однако иногда лучше показать, что пользователь не имеет доступа к странице, нежели сразу его перенаправлять ).