NotFound 路由总是显示静态路由 - [React Router 4]

Question

如何使用 React Router 4 和静态路由定义一个 notFound 组件？

我使用 react-router-redux 的 next 版本。所以，在我的客户中：

export default function appRoutes(history) {
  return (
    <ConnectedRouter history={history}>
      <div>
        {routes.map((route, key) => (
          <Route key={key} {...route} />
        ))}
      </div>
    </ConnectedRouter>
  );
}

路线是：

export const routes = [
  {
    path: '/',
    component: App
  },
  {
    path: '/:lang/chat',
    component: Chat
  },
  {
    path: '/:lang',
    component: Listing
  },
  ...
  {
    path: '*',
    component: NotFound,
    status: 404
  },
];

使用这种方法，找不到的组件总是与匹配的路线一起显示。

我已经读到，我必须使用 Switch，而不是用 div 包装上面描述的 appRoutes 方法。但是使用这种方法，路由永远不会匹配。

编辑

我想同时显示，比如App组件和Listing组件，但是NotFound也在显示。

所以，我做错了什么？

Answer 1

React router V4 显示所有匹配的路由。如果您只想显示一个，请使用 Switch 组件。

Answer 2

我找到了适合我的解决方案。我从静态路由中删除了 App 组件并放在之前，然后我使用 Switch 只渲染一条路由。

export default function appRoutes(history) {
  return (
    <ConnectedRouter history={history}>
      <div>
        <Route path='/' component={App} />
        <Switch>
          {routes.map((route, key) => (
            <Route key={key} {...route} />
          ))}
        </Switch>
      </div>
    </ConnectedRouter>
  );
}

NotFound 路由总是显示静态路由 - [React Router 4]

NotFound route always showing with static routes - [React Router 4]

reactjs

react-router

react-router-redux

react-router-v4