關於 PrivateRoutes 並導航回登錄頁面的問題

Question

嗨，我需要幫助才能讓我的代碼正常工作，這樣當我嘗試重新登錄時，我將無法在我注銷后查看儀表板。 現在它在我的項目中給了我一個空白屏幕，我認為這是因為 privateroute 不再是一個東西了？ 沒有把握。 這是我在 PrivateRoute.js 中的代碼：

import React, { Component } from 'react';
import { Route, Navigate } from 'react-router-dom';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

const PrivateRoute = ({ component: Component, auth: { isAuthenticated, loading },
...rest }) => (
    <Route {...rest} render={props => !isAuthenticated && !loading ? (<Navigate to='/login' />) : (<Component {...props} />)} />
)


PrivateRoute.propTypes = {
  auth: PropTypes.object.isRequired
};

const mapStatetoProps = state => ({
    auth: state.auth
});

export default connect(mapStatetoProps)(PrivateRoute);

這是 app.js 的代碼：

import React, { Fragment, useEffect } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Navbar from './components/layout/Navbar';
import Landing from './components/layout/Landing';
import Register from './components/auth/Register';
import Login from './components/auth/Login';
import Alert from './components/layout/Alert';
import Dashboard from './components/dashboard/Dashboard';
import PrivateRoute from './components/routing/PrivateRoute';
// Redux
import { Provider } from 'react-redux';
import store from './store';
import { loadUser } from './actions/auth';
import setAuthToken from './utils/setAuthToken';

import './App.css';

if (localStorage.token) {
  setAuthToken(localStorage.token);
}

const App = () => { 
  useEffect(() => {
    store.dispatch(loadUser());
  }, []);

return (
  <Provider store={store}>
  <Router>
    <Fragment>
      <Navbar />
      <Routes>
      <Route exact path='/' element={<Landing/>} />
      </Routes>
      <section className="container">
        <Alert />
        <Routes>
          <Route exact path='/Register' element={<Register/>} />
          <Route exact path='/Login' element={<Login/>} />
          <PrivateRoute exact path='/dashboard' element={Dashboard} />
        </Routes>
      </section>
    </Fragment>
  </Router>
  </Provider>
)};

export default App;

請幫忙！

Answer 1

您可以遵循 v6 react router docs 中推薦的 Protected Route 實現。

文檔實施

你的問題：

<Route {...rest} render={props => !isAuthenticated && !loading ?
 (<Navigate to='/login' />) : (<Component {...props} />)} />

這條路線不是最新的 v6，我假設你正在使用它，你需要更新它。

Exact 也不再受支持，將其包含在您的路線中是沒有意義的。

如果您不使用 v6，請更新您的帖子並包含您的 react-router 版本。