时间戳

首页 > 解决方案 > 用本地存储反应路由器私有路由？

reactjs - 用本地存储反应路由器私有路由？

问题描述

我有一个在我的应用程序中使用的私有路由组件。

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import PropTypes from 'prop-types';

    const PrivateRoute = ({ component: Component, ...rest }) => {
      const userLoggedIn = localStorage.getItem('token');
      return (
        <Route
          {...rest}
          render={(props) => (
            userLoggedIn
              ? <Component {...props} />
              : (
                <Redirect to={{
                  pathname: '/login',
                }}
                />
              )
          )}
        />
      );
    };

    PrivateRoute.propTypes = {
      component: PropTypes.elementType.isRequired,
    };


    export default PrivateRoute;

登录时，我设置并重定向token到. 问题是，虽然如果我检查 DevTools是否存在于.localStoragePrivateRouteuserLoggedInnulltokenlocalStorage

我不确定在这里做什么。我正在使用 localStorage，以便在刷新页面时用户仍然登录。所有帮助将不胜感激。

私人路线的父母

const Routes = () => (
  <>
    <Provider store={store}>
      <HeaderContainer />
      <Switch>
        <>
          <PrivateRoute path="/" component={HomeContainer} exact />
        </>
      </Switch>
    </Provider>
  </>
);

export default Routes;

应用程序.js

const App = () => (
  <div className={styles.App}>
    <Routes />
  </div>
);

标签： reactjs

解决方案

根据他们的文件：

a 的所有子元素<Switch>都应该是<Route>或<Redirect>元素。只有与当前位置匹配的第一个孩子才会被渲染。

看起来您的 Private Route 包含在 React 片段中，这可能会导致问题。将路线移到片段之外可以解决问题吗？

  <Switch>
    {/* <> // remove line */}
      <PrivateRoute path="/" component={HomeContainer} exact />
    {/* </> // remove line */}
  </Switch>

推荐阅读