リアクタルータ4ネストされたルート

Question

私は自分のコンポーネントの1つでネストされたルーティングをしようとしています。ここで

は、親コンポーネントです：

const App =() => (
    <BrowserRouter> 
    <Provider store={store}> 
     <Switch> 
     <Route exact path="/" component={Landing} /> 
     <Route path="/contribute" component={Contribute} /> 
     </Switch> 
    </Provider> 
    </BrowserRouter> 
); 

そしてここでは、子コンポーネントです：

const Landing =() => (
    <div> 
    <SearchBar /> 
    <section className="results-sctn"> 
     <Route exact path="/" component={ArtistList} /> 
     <Route path="/test" component={Test} /> 
    </section> 
    </div> 
); 

ArtistListは/ルート上に微細なレンダリングが、/testは完全に白紙ページをレンダリングします。なぜこれが起こっているのでしょうか？

Answer 1

親ルート

<Route exact path="/" component={Landing} /> 

に言及したexact属性は、だから何が起こるすると、その反応-ルータが一致するパス/testを見て、その後、トップレベルから始め、それを一致させようとされているため、この現象が起こります。 1つはexactly /、もう1つは/contributeです。それらのどれも必要なパスと一致していないので、あなたはあなたがこれを行うときに、それは部分的に/testに一致する/が表示されます

<Route path="/" component={Landing} /> 

を記述する必要が空白のページに

を参照して、見つけようとしますそれが見つかるはずのlandingコンポーネントの中で一致したルートを探します。 Switchは最初の試合をレンダリングし、/が/testそう/contribute文句を言わない仕事のために部分一致であるため、

はまた

あなたの最終的なコードが

const App =() => (
    <BrowserRouter> 
    <Provider store={store}> 
     <Switch> 
     <Route path="/contribute" component={Contribute} /> 
     <Route path="/" component={Landing} /> 
     </Switch> 
    </Provider> 
    </BrowserRouter> 
);