关于一个Link可以匹配多个Route的解释

<Link to="/moive/in_theaters/2">电影</Link>,在app.jsx中通过<Route path="/moive" component={Moive}></Route>进入moive.jsx中,然后又匹配到<Route path="/moive/:type/:page" component={MoiveList}></Route>,匹配到moiveList.jsx。
实现了,一个Link匹配多个Route。

app.jsx
在这里插入图片描述
在这里插入图片描述
moive.jsx
在这里插入图片描述
但是为何Link可以匹配多个Route,请看官网上的一句话:
When a <Switch> is rendered, it searches through its children <Route> elements to find one whose path matches the current URL. When it finds one, it renders that <Route> and ignores all others. This means that you should put <Route>s with more specific (typically longer) paths before less-specific ones.
意思是当一个Switch开始被渲染,就是渲染了Link to后,回去寻找,与其最匹配的的Route path。当找到一个匹配的Route后,会忽视其他的Route path。(特别注意最后一句):这个意思是你应该将最匹配的path放在最前面。
他的意思就是如果你的s中有多个匹配,你应将你相匹配的放在最前面。前提是s被包裹在 中。
One important thing to note is that a <Route path> matches the beginning of the URL, not the whole thing. So a <Route path="/"> will always match the URL. Because of this, we typically put this <Route> last in our <Switch>. Another possible solution is to use <Route exact path="/"> which does match the entire URL.这段意思是s匹配时,是匹配路径开头,而不是路径匹配,所以应将path=“/”放在最后(用来所有s都没匹配到的处理),而不是放在最前面。或者加上exact,让其称为精准匹配。
重点:若是没有 包裹,一个Link是可以匹配多个的

猜你喜欢

转载自blog.csdn.net/qq_42835377/article/details/104639391