react-router-dom 6：以编程方式路由到不同的元素

Question

我有一个 Class App.js，其中包含元素 SignInAndSignUpPage ("/signin") 和 HomePage ("/")。 当用户登录（通过 Firebase db）时，我想让登录/SignInAndSignUp 页面无法访问，直到他们单击 Header 元素中的退出按钮。

  render() {
    return (
      <div>
        <Header />
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/shop" element={<ShopPage />} />
          <Route path="/signin" element={<SignInAndSignUpPage />} />
          {/* pass the currentUser state as a prop */}
          {this.props.currentUser
            ? ((<Route path="/" element={<HomePage />} />),
              console.log(`"current user info:" ${this.props.currentUser}`))
            : ((<Route path="/signin" element={<SignInAndSignUpPage />} />),
              console.log("sign in"))}
        </Routes>
      </div>
    );
  }

我正在尝试使用三元运算符来确定 this.props.currentUser 是否不是 null，然后路由到主页。 如果是 null、go 到 SignInAndSignUp 页面。

日志记录显示 this.props.currentUser 不是 null，它应该在正确的调用(<Route path="/" element={<HomePage />} />) ，但登录页面仍然是呈现。

删除<Route path="/signin" element={<SignInAndSignUpPage />} />调用只会删除 SignInAndSignUp 中的子组件，但仍不会路由到 HomePage。

另一种说法，我想要实现的是，当用户登录页面时应该被路由到主页，如果他们当前已登录并尝试手动更新 url 以到达 /登录页面，它们应该被路由到主页。

编辑：尝试了三元运算符和 PrivateRoute，似乎都不起作用。 三元运算符现在被注释掉了。 这是控制台输出的内容，至少在操作和有效负载方面。 如果 currentUser 为 null，则有效负载将为 null。

render() {
    return (
      <div>
        <Header />
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/shop" element={<ShopPage />} />
          <Route path="/signin" element={<SignInAndSignUpPage />} />
          <Route
            path="/"
            element={
              <PrivateRoute currentUser={this.props.currentUser}>
                <HomePage />
              </PrivateRoute>
            }
          />
          {/* <Route
            path="/"
            element={
              this.props.currentUser ? <HomePage /> : <Navigate to="/signin" />
            }
          /> */}
          {/* pass the currentUser state as a prop */}
          {/* {this.props.currentUser
            ? ((<Route path="/" element={<HomePage />} />),
              console.log(`"current user info:" ${this.props.currentUser}`))
            : ((<Route path="/signin" element={<SignInAndSignUpPage />} />),
              console.log("sign in"))} */}
        </Routes>
      </div>
    );
  }
}

这是 PrivateRoute 的代码：

import React from "react";
import { Navigate } from "react-router";

const PrivateRoute = ({ children, ...props }) => {
  return props.currentUser ? children : <Navigate to="signin" />;
};

export default PrivateRoute;

Answer 1

如果你想使用三元运算符，你可以在 element prop 中这样做：

<Route path="/" element={this.props.currentUser ? <Homepage /> : <Navigate to="signin" />} /> 

您显然必须import { Navigate } from 'react-router-dom'否则您可能会制作一个自定义的受保护路由组件以重定向到注册页面，如下所示：

import { Navigate } from 'react-router-dom';

const PrivateRoute = ({ children, ...props }) => {   
  return props.currentUser
    ? children
    : <Navigate to='/signin' /> }
}

export default PrivateRoute;

然后像这样使用

<Route path="/" element={
  <PrivateRoute currentUser={this.props.currentUser}>
    <Homepage />
  </PrivateRoute>
} />

Answer 2

好的，我想通了。 我在控制台中不断收到此错误“React 路由器与任何路由/signin 不匹配”，我相信这是因为使用 <Navigate to='/signin/ /> 我从未在路由声明中的任何地方声明过该元素。

const PrivateRoute = ({ children, ...props }) => {   
  return props.currentUser
    ? children
    **: <Navigate to='/signin' /> }**
}

所以，我更新为：

const PrivateRoutes = ({ children, ...props }) => {
  return !props.currentUser ? children : <Navigate to="/" />;
};

如果 currentUser是null，则渲染 (SignInAndSignUp) 子级，否则导航到“/”。

App.js 更新：

render() {
    return (
      <div>
        <Header />
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route
            path="/signin"
            element={
              <PrivateRoutes currentUser={this.props.currentUser}>
                <SignInAndSignUpPage />
              </PrivateRoutes>
            }
          />
          <Route path="/shop" element={<ShopPage />} />
        </Routes>
      </div>
    );
  }

我必须在声明中保留<Route path="/" element={<HomePage />} /> ，否则我会收到“React 路由器与任何路由不匹配”错误。 我意识到这似乎很奇怪，甚至倒退，但是将其反转以便 PrivateRoutes 导航到 HomePage 似乎不起作用。 想法绝对是受欢迎的，因为我意识到这不是最好的代码。