Javascript 反应路由器与专用路由呈现空白页

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

各位好,

我的代码中有一个bug，我总是找不到它，所以请帮助我找到让它工作的方法

我创建了react应用程序，尝试在其中添加用户身份验证。我正在查看的教程：

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

让我们从头开始

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')); 

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./App”导入应用程序；
从“/_helpers/fake backend”导入{configureFakeBackend}；
configureFakeBackend（）；
ReactDOM.render((
)，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;

import React，{Component}来自'React'；
导入“/App.scss”；
从“/components/MainContent.jsx”导入MainContent；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
从“./components/PrivateRoute”导入{PrivateRoute}；
从“./LoginPage/LoginPage”导入{LoginPage}；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

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 } }} />
    )} />
)

从“React”导入React；
从“react router dom”导入{Route，Redirect}；
导出常量PrivateRoute=（{component:component，…rest}）=>(
(
localStorage.getItem（'用户'）
? 
: 
)} />
)

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;

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;

import React，{Component}来自'React'；
从“./Sidebar.jsx”导入侧栏；
从“./Header.jsx”导入标头；
从“/Main.jsx”导入Main；
从“../\u services/user.service”导入{userService}；
从'react router dom'导入{Link}；
类MainContent扩展组件{
建造师（道具）{
超级（道具）；
此.state={
用户：{}，
用户：[]
};
}
componentDidMount（）{
这个.setState（{
用户：JSON.parse（localStorage.getItem（'user'）），
用户：{正在加载：true}
});
然后（users=>this.setState（{users}））；
}
render（）{
const{user，users}=this.state；
返回(
你好{user.firstName}！
{users.loading&&loading users…}
{users.length&&

{users.map（（用户，索引）=>

{user.firstName+''+user.lastName}

)}

}

注销

);
}
}
导出默认主内容；

至少：Main.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;

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;

从“React”导入React；
从“react router dom”导入{Switch，Route}；
从“/Dashboard”导入仪表板；
从“/订单”导入订单；
从“./Routes”导入路由；
从“./Drivers”导入驱动程序；
从“./Settings”导入设置；
常量Main=（）=>(
);
导出默认主；

因此，仪表板组件将呈现良好效果，但其他组件呈现为空白页面。请帮我修一下。等待答复

---

正如

正确的那样，Main.js中的这些路由只有在App.js呈现时才会呈现。也就是说，当路径为

/

时，将呈现Main.js。当它是其他东西时，Main.js不会被渲染，所以开关组件永远不会被点击

要解决这个问题，您应该删除Main.js并将所有这些路由放在顶层（如果有帮助的话，您可以在App.js中有两个

Switch

组件），或者在App.js中设置路径（对于MainComponent）以包含所有这些路由。前者更干净，因为后者可能变得复杂

---

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

*

上匹配路径。请检查是否需要作为默认值导入

PrivateRoute

@Justas。请保留完整的工作代码，谢谢您的帮助。我在PrivateRouter中添加了第二个开关到App.js，解决了这个问题。所以你的

（如果有帮助的话，你可以在App.js中有两个开关组件）

对我帮助很大。