每个 url 上的 404 页面渲染 [使用 React-router]答案

【问题标题】：404 page rendering on every url [using React-router]每个 url 上的 404 页面渲染 [使用 React-router]
【发布时间】：2017-08-31 19:35:14
【问题描述】：

我正在关注 reacttraining.com 上的基本示例

到目前为止，除了“不匹配”页面外，一切正常。

如果我使用他们显示的完全相同的代码：

<Switch>
    <Route path="/" exact component={Home}/>
    <Redirect from="/old-match" to="/will-match"/>
    <Route path="/will-match" component={WillMatch}/>
    <Route component={NoMatch}/>
 </Switch

只有当 url 不匹配任何其他组件时，才应呈现 NoMatch 组件。

相反，它会在每个 url 上呈现，包括带有组件的那些。

他们说

没有路径的总是匹配的

但该规则不应该只适用于无组件网址吗？

我做错了什么？

另外，关于同一主题：如何为路由渲染整个页面，而不仅仅是在同一页面上渲染组件？

谢谢！

【问题讨论】：

嘿贡萨洛。肯定有什么奇怪的事情发生了。您确定您安装了正确版本的路由器吗？我这样说是因为网站上的示例实际上是在后台使用示例代码。因此，如果它在网站上运行，它应该 100% 运行 irl（因为它确实在后台使用该代码）。
对于最后一个问题，您可以使用components 像这样<Route path="groups" components={{main: Groups, sidebar: GroupsSidebar}} /> 的prop 将一组组件放入路由中
我也有同样的问题。你有想过吗？

标签： reactjs react-router

【解决方案1】：

据我了解，您有 3 条路线：

1) \ 作为项目的根

2) old-match 你想重定向到 will-match

3) will-match 想要显示WillMatch 的组件

并且未知路由必须渲染NoMatch组件。为此，最好实现您上面所说的这种方法，以便您的路由处理重定向和 404 组件：

<Switch>
    <Route path="/" exact component={Home} />
    <Route exact={true} path='/old-match' render={() => { return <Redirect to="/will-match" />; }} />
    <Route path="/will-match" component={WillMatch} />
    <Route component={NoMatch} />
</Switch>

【讨论】：