使用 React-Router 尝试根据状态重定向用户时遇到问题

IT技术 javascript reactjs express react-router
2021-05-04 05:55:35

我的应用程序组件重定向一个使用的基于如果他们登录= true，我在尝试了各种方法后使用了一个在线示例，如果有更简单的功能react方式来做到这一点，请告诉我，

如果用户已登录，我希望他们转到 /createpost 否则我希望他们转到 /login 路由，我想保护用户必须登录的 /createpost 路由，但这是另一个任务，虽然想法赞赏..

沙箱：https : //codesandbox.io/s/focused-sammet-eitqr

我的应用程序组件 

const App = () => {
  return (
    <Router>
      <Switch>
        <Route component={Navbar} />
        <Route exact path="/Home" component={Home} />
        <Route exact path="/posts" component={ViewPost} />
        <Route exact path="/login" component={Login} />
        <Route exact path="/register" component={Register} />

        <PrivateRoute
          path="/createpost"
          component={CreatePost}
          isAuthenticated={false}
        />
      </Switch>
    </Router>
  );
};

私有路由组件 

export const PrivateRoute = ({
  component: Component,
  isAuthenticated,
  ...rest
}) => (
  <Route
    {...rest}
    render={props =>
      isAuthenticated ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{
            pathname: "/login",
            state: { from: props.location }
          }}
        />
      )
    }
  />
);
1个回答

我是通过下面的代码做到的 - 

import React, { Component } from 'react';
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
import { baseURL } from './components/action';
import './App.css';
import TopNavBar from './components/TopNavBar';
import SideNavBar from './components/sideNavBar';
import Footer from './components/footer';
import DashBoard from './components/dashBoard';
import Media from './components/media';
import Login from './components/Login';
import Registration from './components/Registration';
import ChangePassword from './components/changePassword';
import ForgotPassword from './components/forgotPassword';
import MyProfile from './components/myProfile';
import PageNotFound from './components/pageNotFound';

class App extends Component {
  render() {
    if (
      localStorage.getItem('token') !== undefined &&
      localStorage.getItem('token') !== '' &&
      localStorage.getItem('token') !== null
    ) {
      var token = localStorage.getItem('token');
    }

    const defaultparams = { params: { p1: '', p2: '' } };

    return (
      <BrowserRouter basename={baseURL}>
        <div>
          {token ? <TopNavBar /> : ''}
          {token ? <SideNavBar /> : ''}
          <div className="page_content">
            <Switch>
              <Route
                path="/"
                exact
                render={() => {
                  return token ? (
                    <DashBoard />
                  ) : (
                    <Login match={defaultparams} />
                  );
                }}
              />
              <Route
                path="/dashboard"
                render={() => {
                  return token ? <DashBoard /> : <Redirect to="/login" />;
                }}
              />
              <Route
                path="/media"
                render={() => {
                  return token ? <Media /> : <Redirect to="/login" />;
                }}
              />
              <Route path="/login/:p1?/:p2?" component={Login} />
              <Route
                path="/signup"
                render={() => {
                  return token ? (
                    <Redirect to="/dashboard" />
                  ) : (
                    <Registration />
                  );
                }}
              />
              <Route
                path="/forgotpassword"
                render={() => {
                  return token ? (
                    <Redirect to="/dashboard" />
                  ) : (
                    <ForgotPassword />
                  );
                }}
              />
              <Route
                path="/changepassword"
                render={() => {
                  return token ? <ChangePassword /> : <Redirect to="/login" />;
                }}
              />
              <Route
                path="/myprofile"
                render={() => {
                  return token ? <MyProfile /> : <Redirect to="/login" />;
                }}
              />
              <Route path="" component={PageNotFound} />
            </Switch>
          </div>
          <Footer />
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

您需要检查令牌。如果存在则加载组件，否则重定向用户。

其它你可能感兴趣的问题
上一篇React js 读取 doc/docx 文件的文本 下一篇我的 react-google-maps 脚本无法加载