React Router v4会将组件渲染两次

Question

这是我的路由器实现

<BrowserRouter>
  <div>
    <Route exact path="/" component={ProfilesIndex} />
    <Route exact path="/profiles" component={ProfilesIndex} />
    <Route exact path="/profiles/new" component={ProfileEditor} />
    <Route exact path="/profiles/:id" component={ProfileEditor} />
  </div>
</BrowserRouter>

当我浏览到 /profiles/new 路径时，它会将 ProfileEditor 组件渲染两次。但对于其他每个路由，都可以正确工作。

有人能建议如何解决这个问题吗？

- Sachin Jain

Answer 1

在浏览了多个部分后，我在路由器文档中找到了答案。问题是它匹配了多个路由。

当用户打开/profiles/new时，它会匹配两个路由：

1. /routes/new
2. /routes/:id

因为:id类似于通配符*，并且它也匹配new单词，所以两个路由都被匹配到，因此组件被呈现两次。

解决方法是，如果您不想匹配多个路由，请使用Switch包装路由。

<BrowserRouter>
  <Switch>
    <Route exact path="/" component={ProfilesIndex} />
    <Route exact path="/profiles" component={ProfilesIndex} />
    <Route exact path="/profiles/new" component={ProfileEditor} />
    <Route exact path="/profiles/:id" component={ProfileEditor} />
  </Switch>
</BrowserRouter>

- Sachin Jain

---

谢谢。你的答案帮了我很多。 - Alexey Korkoza

我也遇到了同样的问题，但是是由React Router 6中的<Outlet />导致的。这个组件会渲染“嵌套”的组件以及基础组件。 - user7075574

在 switch 语句中只能有一个通配符吗？ - lolelo

Answer 2

对我来说，这是因为React.StrictNode包装了App组件。

它有意双重渲染组件（仅在开发中），以强制您不要在某些组件的生命周期事件上使用副作用。

这背后的原因在这里有记录。

- AmirHossein Abdolmotallebi

---

React 真是让人崩溃，真的！) - flm

Answer 3

对于从v6+版本迁移的人

exact属性不再存在，如果路径没有添加通配符*，则默认情况下路径是精确匹配的。

但是，我仍然会出现双重渲染。我进行了一次生产构建并进行了检查，双重渲染已经消失了，所以可能没有什么可担心的-有时钩子在开发模式下运行两次（我猜这是内部发生的事情）。

- Dominic

---

我刚刚测试了一下，你是对的。不过我仍然很好奇为什么在开发中会出现这种情况。 - Xavier Mukodi

@XavierMukodi，就像AmirHossein提到的那样，在开发者模式下使用严格模式时，这是预期的行为。详细信息请参见https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects - Igor Lino