Imbriqués les routes avec réagissent routeur v4 / v5

Dans réagissent-routeur-v4 vous n'avez pas de nid <Routes />. Au lieu de cela, vous les mettez à l'intérieur une autre <Component />.

Par exemple

<Route path='/topics' component={Topics}>
<Route path='/topics/:topicId' component={Topic} />
</Route>

devrait devenir

<Route path='/topics' component={Topics} />

avec

const Topics = ({ match }) => (
<div>
<h2>Topics</h2>
<Link to={`${match.url}/exampleTopicId`}>
Example topic
</Link>
<Route path={`${match.url}/:topicId`} component={Topic}/>
</div>
) 

Ici est un exemple de base directement à partir de la réaction-routeur la documentation.

Voulais juste parler, réagir-routeur v4 changé radicalement depuis que cette question a été postée/answed.

Il n'y a pas de <Match> composant plus! <Switch>est de s'assurer que seul le premier match est rendu. <Redirect> bien .. redirige vers une autre voie. D'utiliser ou de laisser exact soit dans ou exclure une correspondance partielle.

Voir les docs. Ils sont grands. https://reacttraining.com/react-router/

Voici un exemple, je l'espère, n'est pas utilisable pour répondre à votre question.

  <Router>
<div>
<Redirect exact from='/' to='/front'/>
<Route path="/" 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>

Espère que ça a aidé, laissez-moi savoir. Si cet exemple n'est pas de répondre à votre question, dites-moi et je vais voir si je peux le modifier.

Vous pouvez essayer quelque chose comme
Routes.js

import React, { Component } from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom';
import FrontPage from './FrontPage';
import Dashboard from './Dashboard';
import AboutPage from './AboutPage';
import Backend from './Backend';
import Homepage from './Homepage';
import UserPage from './UserPage';
class Routes extends Component {
render() {
return (
<div>
<Route exact path="/" component={FrontPage} />
<Route exact path="/home" component={Homepage} />
<Route exact path="/about" component={AboutPage} />
<Route exact path="/admin" component={Backend} />
<Route exact path="/admin/home" component={Dashboard} />
<Route exact path="/users" component={UserPage} />    
</div>
)
}
}
export default Routes

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Route } from 'react-router-dom'
import Routes from './Routes';
class App extends Component {
render() {
return (
<div className="App">
<Router>
<Routes/>
</Router>
</div>
);
}
}
export default App;

Je pense que vous pouvez obtenir le même à partir d'ici aussi.

interface IDefaultLayoutProps {
children: React.ReactNode
}
const DefaultLayout: React.SFC<IDefaultLayoutProps> = ({children}) => {
return (
<div className="DefaultLayout">
{children}
</div>
);
}
const LayoutRoute: React.SFC<IDefaultLayoutRouteProps & RouteProps> = ({component: Component, layout: Layout, ...rest}) => {
const handleRender = (matchProps: RouteComponentProps<{}, StaticContext>) => (
<Layout>
<Component {...matchProps} />
</Layout>
);
return (
<Route {...rest} render={handleRender}/>
);
}
const ScreenRouter = () => (
<BrowserRouter>
<div>
<Link to="/">Home</Link>
<Link to="/counter">Counter</Link>
<Switch>
<LayoutRoute path="/" exact={true} layout={DefaultLayout} component={HomeScreen} />
<LayoutRoute path="/counter" layout={DashboardLayout} component={CounterScreen} />
</Switch>
</div>
</BrowserRouter>
);