根据 ReactJS 中的条件重定向到页面答案

【问题标题】：Redirecting to pages depending on conditionals in ReactJS根据 ReactJS 中的条件重定向到页面
【发布时间】：2022-01-08 18:18:30
【问题描述】：

Given 是一个有 3 个页面的应用程序：

“主页”
“隐私页面”
“用户管理页面”

成功登录后，用户将被重定向到“PrivatPage”。在“PrivatPage”上，用户可以返回“MainPage”或前往“UserManagementPage”。从“MainPage”重定向到“PrivatPage”的部分有效。代码如下所示：

import PublicPage from "./components/PublicPage";
import PrivatePage from "./components/PrivatePage";
import UserManagementPage from "./components/UserManagementPage";
import React, { useState, Component } from "react";
import { connect } from "react-redux";

const mapStateToProps = state => {
    return state;
};

class App extends Component {
    render() {
        const accessToken = this.props.accessToken;

        console.log(accessToken);
        let workspace;
        if (accessToken) {
            workspace = <PrivatePage />;
        } else {
            workspace = <PublicPage />;
        }

        return <div className="App">{workspace}</div>;
    }
}
export default connect(mapStateToProps)(App);

但是我如何使用条件来访问“UserManagementPage”？

【问题讨论】：

标签： javascript node.js reactjs conditional-statements

【解决方案1】：

如果您考虑功能组件，您可以使用BrowserRouter 和react-router-dom，如下所示。如果您需要处理身份验证，您可以 f.e.构建一个自定义的<PrivateRoute /> 组件并在受保护的路由上使用它而不是<Route />。我总是将这些路由保存在一个单独的文件中，并将它们导入App.js。这里用于演示目的的路线App.js：

import { BrowserRouter as Router } from "react-router-dom";
// import your page components
// and add everything else you want to add to your component

const App = () => {

  return (
    <>
      <Router>
        <Routes>
          <Route path="/login" element={<Login />} />
          <Route path="/private" element={<PrivatePage />} />
          <Route path="/public" element={<PublicPage />} />
          <Route path="/user" element={<UserManagementPage />} />
        </Routes>
      </Router>
    </>
  );
};

export default App;

【讨论】：

【解决方案2】：

添加到私有块的答案，然后你会在你的组件中使用

<Redirect to='/your-route' />

然后您将创建一个布尔状态变量，一旦它返回 true，您就可以像这样重定向 immediatley（您正在渲染 jsx）：

render() {
    {booleanState && <Redirect to='/your-route' />}
}

【讨论】：