はURL

Question

にルータ無視スラッシュを反応させるのルータはなぜ地球上で、それは両方のルートを実行しますルート/foo/bar

ReactDOM.render(
(<BrowserRouter> 
     <div> 
       <Route path="/foo/bar" component={FooBar}/> 
       <Route path="/foo" component={Foo}/> 
     </div> 
</BrowserRouter>) 
, document.getElementById("root")); 

ためFooとFooBarの両方をレンダリングリアクト？私はこれが気違いだと思います。

ネストされたルートを使用するにはどうすればいいですか（/foo/bar/baz/whateverなどの複数のネストされたルートを実行する場合は、:/paramsを使用しないでください）。

この質問に対する回答は、私が現在使用しているバージョンについて言及しなくても意味がありますか？

Answer 1

ルータV4は、あなただけの最初に一致したルートがレンダリングされていることを確認するためにスイッチコンポーネントを使用することができますリアクト付：

import { Switch, Route } from 'react-router-dom' 

... 

<Switch> 
    <Route path="/foo/bar" component={FooBar}/> 
    <Route path="/foo" component={Foo}/> 
</Switch> 

あなたはまた、/fooのを確保するために正確な小道具を使用することができます

<Route path="/foo" exact component={Foo}/> 
<Route path="/foo/bar" component={FooBar}/> 

：URLは /fooのなく /fooの/バーときにルートが唯一一致しています