reactjs - React Router 4 Rutas anidadas no renderizadas

react-router react-router-v4

Question

Estoy tratando de hacer un enrutamiento anidado en uno de mis componentes.

Aquí está el componente principal:

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

Y aquí está el componente hijo:

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

ArtistList muestra bien en la ruta / , pero /test muestra una página totalmente en blanco. ¿Alguna idea de por qué podría ser esto?

Answer 1

Este comportamiento ocurre porque tiene un atributo exact mencionado en la ruta principal

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

Entonces, lo que sucede es que el enrutador de reacción ve una ruta /test para que coincida y luego intenta hacerlo desde el nivel superior. y ve dos rutas, una es exactly / y otra es /contribute . Ninguno de ellos coincide con la ruta requerida y, por lo tanto, ve una página en blanco

Necesitas escribir

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

Entonces, cuando haga esto, verá / que coincide /test parcialmente y luego intentará encontrar una ruta coincidente en el componente de landing que encontrará.

También cambie el orden de la ruta principal, ya que Switch representa la primera coincidencia y / es una coincidencia parcial para /test por lo que /contribute no funcionará

Tu código final se vería así

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