[英]React router v5: need a nested route in dynamic routes
Happening specifically on react-router-dom v5.2.0
I have a list of items, all of which need their own page, and within that dynamic route, I would like some nested routes.具体发生在
react-router-dom v5.2.0
我有一个项目列表,所有这些都需要自己的页面,并且在那个动态路由中,我想要一些嵌套路由。
Think of it like this:可以这样想:
The thing is, with the way I'm implementing it, every nested /:item/whatever
page gets a 404. Here is what my routing currently looks like:问题是,按照我实现它的方式,每个嵌套的
/: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>
);
};
As it stands, I can get the pages for /:item
, but if I try to go to their nested routes, I get 404s.就目前而言,我可以获得
/:item
的页面,但是如果我尝试转到它们的嵌套路由,则会得到 404。 Is something wrong in my setup?我的设置有问题吗? How can I get this to work?
我怎样才能让它发挥作用?
Take note that I've tried a bunch of different variations of this:请注意,我已经尝试了很多不同的变体:
App
component App
组件中的嵌套路由Switch
wrapperSwitch
包装器Route
as a component
prop for the nested onescomponent
prop 传递到Route
Edit: decided to include a version of my Item
component where I have every variation of a Route that I could think of for the /about
route.编辑:决定包含我的
Item
组件的一个版本,我可以在其中包含我可以想到的/about
路由的所有变体。 Absolutely nothing works, which it should according to the docs ( see the recursive paths ) and I am starting to question my sanity绝对没有任何效果,它应该根据文档(请参阅递归路径)并且我开始质疑我的理智
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>
);
};
So it would seem I was going about this the completely wrong way.所以看起来我是在以完全错误的方式解决这个问题。
For what I wanted to do, my nested routes needed to be on the App
component, or at least on the root of the first Switch
wrapper.对于我想要做的,我的嵌套路由需要在
App
组件上,或者至少在第一个Switch
包装器的根上。
So basically this was the solution:所以基本上这是解决方案:
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>
)
}
I still am confused because the docs showed it differently, but anyway, this is what solved the issue.我仍然很困惑,因为文档以不同的方式显示它,但无论如何,这就是解决问题的方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.