Question

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

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

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
  },
];

使用此方法，未找到的组件始终显示匹配的路径。

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

修改

我想同时显示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]

2 个答案: