React Router 与 Private Route 渲染空白页面

Question

已阅读所有相关主题，但仍未找到答案

大家好，

我的代码中有一个错误，并且一如既往地找不到它，所以请帮助我找到让它工作的方法。

我有 create-react-app 我正在尝试添加用户身份验证。我正在看的教程：http://jasonwatmore.com/post/2018/09/11/react-basic-http-authentication-tutorial-example

问题：当我登录时，我看到“仪表板”（精确）组件，一切正常。但后来我点击了其他链接，比如“订单”等。我正在渲染空白页面。控制台上没有错误。

让我们从头开始。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

import { configureFakeBackend } from './_helpers/fake-backend';
configureFakeBackend();

ReactDOM.render((
      <App />
), document.getElementById('root')); 

App.js 文件

import React, { Component } from 'react';
import './App.scss';
import MainContent from './components/MainContent.jsx';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { PrivateRoute } from './components/PrivateRoute';
import { LoginPage } from './LoginPage/LoginPage';


class App extends Component {
  render() {
    return (
            <Router>
              <Switch>
                <PrivateRoute exact path="/" component={MainContent} />
                <Route path="/login" component={LoginPage} />
              </Switch>
            </Router>
    );
  }
}

export default App;

PrivateRoute.jsx

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

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

MainContent.jsx

import React, { Component } from 'react';
import Sidebar from './Sidebar.jsx';
import Header from './Header.jsx';
import Main from './Main.jsx';
import { userService } from '../_services/user.service';
import { Link } from 'react-router-dom';

class MainContent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            user: {},
            users: []
        };
    }
    componentDidMount() {
        this.setState({ 
            user: JSON.parse(localStorage.getItem('user')),
            users: { loading: true }
        });
        userService.getAll().then(users => this.setState({ users }));
    }
  render() {
    const { user, users } = this.state;
    return (

      <React.Fragment>
      <h1>Hi {user.firstName}!</h1>
      {users.loading && <em>Loading users...</em>}
      {users.length &&
          <ul>
              {users.map((user, index) =>
                  <li key={user.id}>
                      {user.firstName + ' ' + user.lastName}
                  </li>
              )}
          </ul>
      }
      <p>
          <Link to="/login">Logout</Link>
      </p>
        <Sidebar />
        <div id="flexing">
            <Header />
            <Main />
          </div>
      </React.Fragment>
    );
  }
}

export default MainContent;

至少：Main.jsx

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Dashboard from './Dashboard';
import Orders from './Orders';
import Routes from './Routes';
import Drivers from './Drivers';
import Settings from './Settings';

const Main = () => (
  <main>
    <Switch>
      <Route exact path='/' component={Dashboard}/>
      <Route path='/orders' component={Orders}/>
      <Route path='/routes' component={Routes}/>
      <Route path='/drivers' component={Drivers}/>
      <Route path='/settings' component={Settings}/>
    </Switch>
  </main>
);

export default Main;

所以 Dashboard 组件会渲染得很好，但其他组件会像空白页一样渲染。请帮助修复它。等待回复。

贾斯塔斯

Answer 1

是的，发生的事情是 Main.js 中的这些路由仅在 App.js 呈现时才会呈现。即当路径为/时，渲染Main.js。当它是其他东西时，不会渲染 Main.js，因此永远不会点击 Switch 组件。

要解决这个问题，您应该删除 Main.js 并将所有这些路由放在顶层（如果有帮助，您可以在 App.js 中有两个 Switch 组件），或者在 App.js 中设置路径（对于 MainComponent）包括所有这些。前者更简洁，因为后者可能会变得复杂。

要查看这是问题所在，请向 App.js 添加一个默认路由，您会看到您看到的“空白”页面是因为在该级别没有匹配的内容；要设置默认值，请在 * 上匹配路径。