Solución:
En react-router-v4 no anida <Routes />. En cambio, los pones dentro de otro <Component />.
Por ejemplo
<Route path="/topics" component={Topics}>
<Route path="/topics/:topicId" component={Topic} />
</Route>
debe convertirse
<Route path="/topics" component={Topics} />
con
const Topics = ({ match }) => (
<div>
<h2>Topics</h2>
<Link to={`${match.url}/exampleTopicId`}>
Example topic
</Link>
<Route path={`${match.path}/:topicId`} component={Topic}/>
</div>
)
Aquí hay un ejemplo básico directamente de la documentación de react-router.
react-router v6
Actualización para 2021
La próxima v6 hubieras anidado Route componentes que Just Work ™
Ver código de ejemplo en esta publicación de blog
La pregunta es sobre v4/v5, pero cuando v6 se envía la respuesta correcta será solo usa eso si puedes.
react-router v4 & v5
Es cierto que para anidar rutas, debe colocarlas en el componente secundario de la ruta.
Sin embargo, si prefiere una sintaxis más en línea en lugar de dividir sus Rutas entre componentes, puede proporcionar un componente funcional a la render puntal de la Ruta bajo la que desea anidar.
<BrowserRouter>
<Route path="https://foroayuda.es/" component={Frontpage} exact />
<Route path="/home" component={HomePage} />
<Route path="/about" component={AboutPage} />
<Route
path="/admin"
render={({ match: { url } }) => (
<>
<Route path={`${url}/`} component={Backend} exact />
<Route path={`${url}/home`} component={Dashboard} />
<Route path={`${url}/users`} component={UserPage} />
</>
)}
/>
</BrowserRouter>
Si está interesado en saber por qué render prop debe usarse, y no el component prop, es porque evita que el componente funcional en línea se vuelva a montar en cada render. Consulte la documentación para obtener más detalles.
Tenga en cuenta que el ejemplo envuelve las rutas anidadas en un fragmento. Antes de React 16, puedes usar un contenedor <div> en lugar de.
Solo quería mencionar react-router v4 cambió radicalmente desde que esta pregunta fue publicada / respondida.
No hay <Match> componente más! <Switch>es asegurarse de que solo se procese la primera coincidencia. <Redirect> bueno .. redirecciona a otra ruta. Usar o dejar fuera exact para incluir o excluir una coincidencia parcial.
Consulte los documentos. Son geniales. https://reacttraining.com/react-router/
Aquí hay un ejemplo que espero sea útil para responder a su pregunta.
<Router>
<div>
<Redirect exact from="https://foroayuda.es/" to='/front'/>
<Route path="https://foroayuda.es/" render={() => {
return (
<div>
<h2>Home menu</h2>
<Link to="/front">front</Link>
<Link to="/back">back</Link>
</div>
);
}} />
<Route path="/front" render={() => {
return (
<div>
<h2>front menu</h2>
<Link to="/front/help">help</Link>
<Link to="/front/about">about</Link>
</div>
);
}} />
<Route exact path="/front/help" render={() => {
return <h2>front help</h2>;
}} />
<Route exact path="/front/about" render={() => {
return <h2>front about</h2>;
}} />
<Route path="/back" render={() => {
return (
<div>
<h2>back menu</h2>
<Link to="/back/help">help</Link>
<Link to="/back/about">about</Link>
</div>
);
}} />
<Route exact path="/back/help" render={() => {
return <h2>back help</h2>;
}} />
<Route exact path="/back/about" render={() => {
return <h2>back about</h2>;
}} />
</div>
</Router>
Espero que haya ayudado, avíseme. Si este ejemplo no responde lo suficientemente bien a tu pregunta, dímelo y veré si puedo modificarlo.