我正在创建一个需要多层嵌套的应用。从三级开始,我的路线无法识别。
App JS
const App = () => {
return (
<React.Fragment>
<Router>
<Switch>
<Route path="/login">
<Login />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</Router>
</React.Fragment>
);
};
Home JS
export default class Home extends React.Component {
render() {
return (
<React.Fragment>
<Header />
<ContentNav />
<Switch>
<Route path="/clients">
<Clients />
</Route>
<Route path="/publishers">
<Publishers />
</Route>
<Route path="/">
<Redirect to="/clients" />
</Route>
</Switch>
</React.Fragment>
);
}
}
Clients JS
class Clients extends React.Component {
render() {
return (
<React.Fragment>
Clients Page
<Switch>
<Route path="/add">
<AddClient />
</Route>
<Route path="/edit">
<AddClient />
</Route>
<Route path="/">
<Entity />
</Route>
</Switch>
</React.Fragment>
);
}
}
这些路由器正在渲染相同的组件http://localhost:3000/clientshttp://localhost:3000/clients/addhttp://localhost:3000/clients/edit
反应嵌套的URL不是相对的,必须指定绝对路径:
<Switch>
<Route path="clients/add">
<AddClient />
</Route>
<Route path="clients/edit">
<AddClient />
</Route>
<Route path="clients/">
<Entity />
</Route>
</Switch>