React-Router 嵌套路由加载空白页面而不是加载到父组件内部答案

【问题标题】：React-Router nested routes loading blank page instead of loading inside parent componentReact-Router 嵌套路由加载空白页面而不是加载到父组件内部
【发布时间】：2018-09-29 10:44:23
【问题描述】：

我是 React 新手，正在尝试使用嵌套路由创建布局。这是我的场景

当 URL 为 / 时显示登录
当 URL 为 /dashboard 时显示仪表板
当 URL 为 /dashboard/profile 时显示配置文件（这应该加载在仪表板内容区域内）

在浏览器中访问 URL 时，登录页面和仪表板页面正在正确加载，但对于 /dashboard/profile，浏览器会转到空白页面，而不是在仪表板组件中加载它。

索引.js

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

App.js

class App extends Component {
  render() {
    return (
      <div>
        {/* <Switch> */}
          <Route exact path='/' component={SignIn}/>
          <Route exact path='/dashboard' component={Dashboard}/>
        {/* </Switch> */}
      </div>
    );
  }
}

export default App;

仪表板.js

class Dashboard extends React.Component {

  render() {
    const { classes } = this.props;

return (
  <React.Fragment>
    <CssBaseline />
    <div className={classes.root}>
      <Header classes={classes} open={this.state.open} click={this.handleDrawerOpen} />
      <Sidebar classes={classes} open={this.state.open} click={this.handleDrawerClose} />
      <main className={classes.content}>
        <div className={classes.appBarSpacer} />           

        *********I expect profile component to load here 
but when I access the URL /dashboard/profile I get a new blank page*********

        Route path="/dashboard/profile" exact component={Profile} />



      </main>
    </div>
  </React.Fragment>
);
  }
}

【问题讨论】：

如何访问 /dashboard/profile 网址？通过浏览器或链接？
是的浏览器也...并在其他组件的某处使用链接
尝试使用HashRouter代替BrowserRouter
我在浏览器中尝试了像这样localhost:3000/#/dashboard/profile 访问gin URL，但它仍然给我一个空白页面，而不是在仪表板组件中打开配置文件组件

标签： reactjs react-router

【解决方案1】：

在执行子路由时，您需要从仪表板路由（存在于Switch）中删除 exact 属性。

这是您的用例的最小实现：

import React, { Component } from "react";
import "./styles.css";

import {
  NavLink,
  Redirect,
  Route,
  BrowserRouter as Router,
  Switch
} from "react-router-dom";

const App = () => (
  <Router>
    <div className="App">
      <ul>
        <li>
          <NavLink to="/login">Login</NavLink>
        </li>
        <li>
          <NavLink to="/dashboard">Dashboard</NavLink>
        </li>
      </ul>

      <Switch>
        <Route exact path="/login" component={Login} />
        <Route path="/dashboard" component={Dashboard} />
      </Switch>
    </div>
  </Router>
);

const Login = () => <span>Login Page</span>;

const Dashboard = () => {
  return (
    <div>
      <div>Dashboard Page</div>
      <NavLink to="/dashboard/profile">Go to profile</NavLink>
      <div>
        <Route exact path="/dashboard/profile" component={Profile} />
      </div>
    </div>
  );
};

const Profile = () => {
  return <span>Profile Page</span>;
};

export default App;

您可以在此处找到工作示例：https://codesandbox.io/s/z3py3672v3

【讨论】：