鍍金池/ 問答/HTML5  HTML/ react-router4路由出現(xiàn)空白

react-router4路由出現(xiàn)空白

// 入口

  <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/>組件。有沒有大神指導一下

圖片描述

圖片描述

回答
編輯回答
溫衫

換了入口路由的順序就能正常渲染出來了

入口

      <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>

圖片描述

2017年7月3日 12:04
編輯回答
挽歌

首先——————你的app組件是在pathname為"/"下渲染出來的，
當你在app里面點擊——————<Link to="/home">home</Link>的時候，pathname變?yōu)?/home"。對應你自己入口的路由，沒有與之相匹配的path，當然就渲染不出來什么組件

2018年8月5日 06:35