使用React-Router尝试根据state重定向用户时遇到问题 [英] Having Issues trying to re-direct user based on state , using React-Router

问题描述

我的应用程序组件将重定向使用过的(如果已登录)= true，我尝试了各种方法后使用了一个在线示例，如果有更简单的功能性反应方式，请向我展示，

my app component redirects a used based if they are logged in = true, I used an online example after trying various methods, if there is a more simple functional react way to do it, please show me,

如果用户已登录，我希望他们转到/createpost，否则我希望他们转到/login路由，我想保护用户必须登录的/createpost路由，但这是一项任务再过一段时间，尽管想法得到了赞赏.

If user is Logged in , I want them to go to /createpost else I want them to go to the /login route, I want to protect the /createpost route that user has to be logged in, but that is a task for another time, though ideas appreciated..

沙箱: 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>
  );
};

PrivateRoute组件

PrivateRoute component

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

推荐答案

我是通过以下代码完成的-

I did it by below code -

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;

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

You need to check token. If exists then load the component otherwise redirect the user.

这篇关于使用React-Router尝试根据state重定向用户时遇到问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！