如何在反应路由器 DOM 版本 6 中设置条件？答案

【问题标题】：how to set condition in react router DOM version 6?如何在反应路由器 DOM 版本 6 中设置条件？
【发布时间】：2022-01-20 21:01:31
【问题描述】：

我想把这个用react router v5写的代码转换成v6但是我不知道怎么做，一般我想设置如果用户没有账号，重定向到注册页面等等。

我知道开关更改和重定向唯一的问题在于这行代码：

<Route exact path="/">
  {user ? <Home /> : <Redirect to="/register" />}
</Route>

整个代码：

import "./app.scss";
import Home from "./pages/home/Home";
import Register from "./pages/register/Register";
import Watch from "./pages/watch/Watch";
import Login from "./pages/login/Login";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect,
} from "react-router-dom";
import { useContext } from "react";
import { AuthContext } from "./authContext/AuthContext";

const App = () => {
  const { user } = useContext(AuthContext);
  return (
    <Router>
      <Switch>
        <Route exact path="/">
          {user ? <Home /> : <Redirect to="/register" />}
        </Route>
        <Route path="/register">
          {!user ? <Register /> : <Redirect to="/" />}
        </Route>
        <Route path="/login">{!user ? <Login /> : <Redirect to="/" />}</Route>
        {user && (
          <>
            <Route path="/movies">
              <Home type="movie" />
            </Route>
            <Route path="/series">
              <Home type="series" />
            </Route>
            <Route path="/watch">
              <Watch />
            </Route>
          </>
        )}
      </Switch>
    </Router>
  );
};

export default App;

【问题讨论】：

从 RRDv5 到 RRDv6 发生了很大变化。你试过什么？提供minimal, complete, and reproducible code example。 Stackoverflow 不是一个代码编写服务，所以如果你还没有尝试过这个并且你正在寻找从哪里开始，请参阅Upgrading from v5 指南。

标签： node.js reactjs react-router-dom

【解决方案1】：

可以使用 v6 的 element 属性，不再需要在 <Route path="/"> 上使用精确的属性。这是因为默认情况下所有路径都完全匹配。如果您想匹配更多 URL，因为您有子路由，请使用尾随 * 作为 <Route path="/*" />。

import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
.
.
.
return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={user ? <Home /> : <Navigate to="/register" replace />} />
        .
        .
        .
      </Routes>
    </BrowserRouter>
)
.
.
.

您还可以在reactrouter docs 中查看更多详细信息：

https://reactrouter.com/docs/en/v6/getting-started/overview

【讨论】：