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内，仍会显示该链接。我想只看到一个未找到的页面（404）。你会如何实现这个目标？

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

任何建议都会感激不尽

Answer 1

在反应路由器1.0.0中删除了

DefaultRoute和NotFoundRoute。

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

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

要显示404页面但更改网址（如DefaultRoute所做的那样）：

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

Answer 2

要获得所需的映射，可以删除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 3

有<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：

当父母的网址部分匹配，但没有儿童这样做时，a 将匹配NotFoundRoute并在任何级别激活其处理程序您的路线层次结构。

Answer 4

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

我添加了一个仅包含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

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

猜猜我现在必须解决这个问题=（

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

4 个答案: