react-router4路由出现空白

Question

// 入口

  <Router>
    <div>
      <Link to="/login">login</Link> <br/>
      <Link to="/">index</Link> <br/>
      <Link to="/home2">home2</Link>
      <Switch>
        <Route exact path="/" component={App}/>
        <Route path="/login" component={Login}/>
        <Route path="/home2" component={Home}/>
      </Switch>
    </div>
  </Router>

// <App/>

   <div className="App">
    <NavBar/>
    <SideBar/>
    <div className="app-content" style={contentStyle}>
      <h1>app-content</h1>
      <Link to="/home">home</Link>
      <Switch>
        <Route exact path="/" component={Dashboard}/>
        <Route path="/home" component={Home}/>
      </Switch>
    </div>
  </div>

---

/login,/home2能够正常渲染出来，访问 / 渲染能够渲染 <Dashboard/>组件（<NavBar/><SideBar/>都能够正常渲染）但是 /home 就是空白了，（<NavBar/><SideBar/>也不能正常渲染）。/home2能够渲染出<Home/>组件。有没有大神指导一下

---

Answer 1

首先——————你的app组件是在pathname为"/"下渲染出来的，
当你在app里面点击——————<Link to="/home">home</Link>的时候，pathname变为"/home"。对应你自己入口的路由，没有与之相匹配的path，当然就渲染不出来什么组件

Answer 2

换了入口路由的顺序就能正常渲染出来了

---

入口

      <Router>
        <div>
          <Link to="/login">login</Link> <br/>
          <Link to="/">index</Link> <br/>
          <Link to="/home2">home2</Link>
          <Switch>
            <Route exact path="/login" component={Login}/>
            <Route exact path="/home2" component={Home}/>
            <Route path="/" component={App}/>
          </Switch>
        </div>
      </Router>

APP

      <div className="App">
        <NavBar/>

        <SideBar/>

        <div className="app-content" style={contentStyle}>
          <h1>app-content</h1>
          <Link to="/home">home</Link><br/>
          <Link to="/">工作台</Link>
          <Switch>
            <Route exact path="/" component={Dashboard}/>
            <Route exact path="/home" component={Home}/>
          </Switch>
        </div>
      </div>

---