如何使用React Router v4在root/home視圖中添加嵌套路由？

Question

以下指令：https://reacttraining.com/react-router/web/example/basic

簡單地說，我希望把所有的嵌套視圖從主題到首頁。

正如你所看到的，主題菜單已經嵌套視圖和嵌套視圖都解決了由匹配的路徑，像\topics\rendering，\topics\components等 但在我而言，我希望把所有這些嵌套進意見主菜單，因爲主菜單是根路徑/，所以它似乎沒有工作了。

下面是我所期待的，

const BasicExample =() => (
    <Router> 
    <div> 
     <ul> 
     <li><Link to="/">Home</Link></li> 
     <li><Link to="/about">About</Link></li> 
     <li><Link to="/topics">Topics</Link></li> 
     </ul> 

     <hr/> 

     <Route exact path="/" component={Home}/> 
     <Route path="/about" component={About}/> 
     <Route path="/topics" component={Topics}/> 
    </div> 
    </Router> 
) 

const Home = ({ match }) => (
    <div> 
    <h2>Home</h2> 
    <ul> 
     <li> 
     <Link to={`${match.url}/rendering`}> 
      Rendering with React 
     </Link> 
     </li> 
     <li> 
     <Link to={`${match.url}/components`}> 
      Components 
     </Link> 
     </li> 
     <li> 
     <Link to={`${match.url}/props-v-state`}> 
      Props v. State 
     </Link> 
     </li> 
    </ul> 

    <Route path={`${match.url}/:desc`} component={SubHome}/> 
    <Route exact path={match.url} render={() => (
     <h3>Please select.</h3> 
    )}/> 
    </div> 
) 

const SubHome = ({ match }) => (
    <div> 
    <h3>{match.params.desc}</h3> 
    </div> 
) 

然而，這並不工作，我想這可能由家庭造成的擁有根路徑/。

Answer 1

我找不到正式的解決方案，所以我提出了一個解決方法。

我給首頁菜單路徑一樣/home而非/，由於應用程序將與/最初開始，所以我加了上面的重定向，如下面的簡單代碼，

const BasicExample =() => (
    <Router> 
    <div> 
     <Redirect from="/" to="/home" /> 
     <ul> 
     <li><Link to="/home">Home</Link></li> 
     <li><Link to="/about">About</Link></li> 
     <li><Link to="/topics">Topics</Link></li> 
     </ul> 

     <hr/> 

     <Route exact path="/home" component={Home}/> 
     <Route path="/about" component={About}/> 
     <Route path="/topics" component={Topics}/> 
    </div> 
    </Router> 
) 

const Home = ({ match }) => (
    <div> 
    <h2>Home</h2> 
    <ul> 
     <li> 
     <Link to={`${match.url}/rendering`}> 
      Rendering with React 
     </Link> 
     </li> 
     <li> 
     <Link to={`${match.url}/components`}> 
      Components 
     </Link> 
     </li> 
     <li> 
     <Link to={`${match.url}/props-v-state`}> 
      Props v. State 
     </Link> 
     </li> 
    </ul> 

    <Route path={`${match.url}/:desc`} component={SubHome}/> 
    <Route exact path={match.url} render={() => (
     <h3>Please select.</h3> 
    )}/> 
    </div> 
) 

const SubHome = ({ match }) => (
    <div> 
    <h3>{match.params.desc}</h3> 
    </div> 
)