具体地说,react-router-dom v5.2.0
我有一个项目列表,所有项目都需要自己的页面,并且在该动态路由中,我想要一些嵌套的路由。
这样想:
事情是,按照我实现它的方式,每个嵌套/:item/whatever
页面都会得到一个404。这是我的路由当前的样子:
const App = ({}) => {
return (
<Router>
<Switch>
<Route exact path='/:id' component={Item}>
</Route>
</Switch>
</Router>
)
}
const Item = ({ match }) => {
return (
<div>
TODO: Item {match.url}
<Switch>
<Route path={`${match.path}/about`}>
<h1>TODO: About</h1>
</Route>
<Route path={`${match.path}/faq`}>
<h1>TODO: FAQ</h1>
</Route>
</Switch>
</div>
);
};
就目前而言,我可以获取的页面/:item
,但是如果我尝试转到其嵌套路线,则会得到404。我的设置有问题吗?我该如何工作?
请注意,我已经尝试了很多不同的方法:
App
组件中的嵌套路线Switch
包装纸Route
作为component
嵌套组件的道具编辑:决定包括我的Item
组件的一个版本,在该版本中,我可以想到该/about
路线的所有路线。绝对没有任何效果,根据文档(应参阅递归路径),它应该起作用,并且我开始质疑自己的理智
const Item = ({ match }) => {
const { url } = useRouteMatch();
return (
<div>
TODO: Item {match.url}
<Route path={`${url}/about`} component={() => <h1>TODO: About</h1>}/>
<Route path={`/about`} component={() => <h1>TODO: About</h1>}/>
<Route path={`about`} component={() => <h1>TODO: About</h1>}/>
<Route path={`:about`} component={() => <h1>TODO: About</h1>}/>
<Switch>
<Route path={`${match.path}/about`}>
<h1>TODO: About</h1>
</Route>
<Route path={`${url}/about`} component={() => <h1>TODO: About</h1>}/>
<Route path={`/about`} component={() => <h1>TODO: About</h1>}/>
<Route path={`/:about`} component={() => <h1>TODO: About</h1>}/>
<Route path={`about`} component={() => <h1>TODO: About</h1>}/>
<Route path={`:about`} component={() => <h1>TODO: About</h1>}/>
</Switch>
</div>
);
};
因此,似乎我正在采用完全错误的方式进行操作。
对于我想做的事情,我的嵌套路由需要在App
组件上,或者至少在第一个Switch
包装器的根目录上。
所以基本上这是解决方案:
const App = ({}) => {
return (
<Router>
<Switch>
<Route exact path='/:id' component={Item}/>
<Route exact path='/:id/about' component={() => <div>TODO: About</div>}/>
<Route exact path='/:id/faq' component={() => <div>TODO: FAQ</div>}/>
</Switch>
</Router>
)
}
我仍然很困惑,因为文档显示的方式有所不同,但是无论如何,这就是解决问题的方法。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句