reactjs - react 路由器确切属性不起作用

Question

exact的目的react 路由器中的属性是，不要对路由进行部分匹配。但是，就我而言，它没有做。
我有两个组件 Write an article和 View a particular article with id .我将两者的路线定义为:

<Route exact path='/article/write' exact component={ArticleOrBlog}/>   
<Route exact  path='/article/:id'  component={ArticleOne}></Route> 

两条路线都有 exact属性(property)。预期行为是，当 ArticleOrBlog组件渲染然后 ArticleOne不能，反之亦然。
这里的问题是一致的。
当 ArticleOne然后组件呈现 ArticleOrBlog组件没有渲染，但是当 ArticleOrBlog然后组件呈现 ArticleOne组件也在渲染。 ArticleOne组件正在渲染以下 ArticleOrBlog成分。
这里行为改变
当我定义路由时:

<Route exact path='/write' exact component={ArticleOrBlog}/>   
<Route exact  path='/article/:id'  component={ArticleOne}></Route> 

<Route exact path='/write/anything' exact component={ArticleOrBlog}/>   
<Route exact  path='/article/:id'  component={ArticleOne}></Route> 

然后它工作正常。

Answer 1

when ArticleOrBlog component renders then ArticleOne components isalso rendering

原因 ArticleOne组件也呈现是因为你有一个动态参数 :id在匹配任何内容的路由中，包括 write在 /article/write . exact prop 不会阻止 react router 渲染所有匹配的路由，它只会确保只渲染完全匹配的路由。
所以当路由是 /article/write ，它匹配两个确切的路径:

/article/write

/article/:id

所以两个组件都被渲染，而不是像你预期的那样只渲染一个。
当您将路由更改为 /write 时和 /article/:id ，然后它按预期工作，因为现在 /article/:id与 /write完全不同.
解决方案:
使用 Switch将确保仅呈现第一个匹配的路由的组件。

<Switch>
   <Route exact path="/article/write" component={ArticleOrBlog} />
   <Route exact path="/article/:id" component={ArticleOne} />
</Switch>

这里要记住的一件事是，在使用 Switch 时如上所示，顺序是 Route组件被定义 - 事项。
在您的情况下， Route带路径 /article/write 应该在 之前定义 Route带路径 /article/:id .这是因为如果 /article/:id在 /article/write 之前定义，然后因为动态参数 :id , /article/write将匹配 /article/:id路径和因为 Switch , 组件位于 /article/write永远不会呈现路径。