React Router v4でルート/ホームビューにネストされたルートを追加するにはどうすればよいですか？

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