在 root 上使用 not-found-route 的 react-router

Question

我想在 root 上创建一个未找到的页面 (404)，但似乎运气不好。

中的示例

var routes = (
    <Route handler={App}>

        <Route name="inbox" handler={Inbox}>
          <Route name="message" path=":messageId" handler={Message}/>
          <DefaultRoute handler={InboxStats}/>
        </Route>

        <Route name="calendar" handler={Calendar}/>
        <DefaultRoute handler={Dashboard}/>

    </Route>
);

< DefaultRoute /> 会显示在 App 里面，App 仍然会显示 link。我只想单独查看未找到的页面 (404)。你将如何实现这一目标？

ps。使 DefaultRoute 与根 Route 处于同一级别会产生抱怨 =(

任何建议将不胜感激

Answer 1

有 <NotFoundRoute> 个处理程序：

<Route name="app" path="/" handler={App}>

  <Route name="inbox" handler={Inbox}>
      <Route name="message" path=":messageId" handler={Message}/>
      <DefaultRoute handler={InboxStats}/>
   </Route>
  <NotFoundRoute handler={NotFound}/>
</Route>

看到这个link:

When a parent's URL partially matches, but none of the children do, a NotFoundRoute will be matched and its handler activated at any level of your route hierarchy.

Answer 2

所以这就是我最终要做的事情：

我添加了一个仅包含 RouteHandler 的根目录（替换了 {App} ）

/not-found -> goes to not found page (because root has no menu)  
/main -> redirect to /main/inbox (main contains menu)  
/main/inbox -> goes to inbox view
/main/inbox/44 -> goes to message #44

路由设置如下所示：

<Route path="/" handler={Root}>
    <Route name="main" handler={Main}>
        <Route name="inbox handler={Inbox}>
            <Route path=":messageId" handler={Message}/>
        </Route>
    </Route>
    <NotFoundRoute handler={NotFound}/>
</Route>

我的初衷是

/not-found -> goes to not found page (because root has no menu)   
/inbox -> goes to inbox view
/inbox/44 -> goes to message #44

因为我有点想将菜单作为主页，其他页面可以继续使用它。

我想我现在必须解决这个问题 =(

Answer 3

要获得所需的映射，您可以删除 name="main" 使其成为默认路由：

<Route path="/" handler={Root}>
    <Route handler={Main}>
        <Route name="inbox" handler={Inbox}>
            <Route path=":messageId" handler={Message}/>
        </Route>
    </Route>
    <NotFoundRoute handler={NotFound}/>
</Route>

还有这个讨论here，值得一看。

Answer 4

DefaultRoute 和 NotFoundRoute 在 react-router 1.0.0 中被移除。

要显示 404 页面并保留 url（如 NotFoundRoute 那样）：

<Route path='*' component={My404Page} />

要显示 404 页面但更改 url（如 DefaultRoute 那样）：

<Route path='/404' component={My404Page} />
<Redirect from='*' to='/404' />

在 root 上使用 not-found-route 的 react-router

react-router with not-found-route on root

reactjs