reactjs - React Router 4 Rutas anidadas no renderizadas
react-router react-router-v4 (1)
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?
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>
);