如何使用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> 
)