尽管匹配了确切的路线，但 React Router 组件不会呈现

Question

我正在使用 React Router 构建一个简单的博客，但在更改位置时遇到一些问题。

预期行为：

Route localhost:8080/#/contact 应该显示 Contact 组件内容。

实际行为：

Route localhost:8080/#/contact 不呈现 Contact 组件，而仅呈现由 HomePage 组件呈现的 Pagination 组件导航链接 - 1、2、3。请注意下面代码中的注释。

可能与路径中的:page参数有关？我的第 1 条和第 5 条路线都在使用它。

补充问题：

如何在主页上实现分页而不干扰其他路由？
登陆 localhost:8080/#/ 主页组件显示博客文章的第一页，技术上应该在 localhost:8080/#/1。有我可以使用的合乎逻辑的解决方法吗？

我的应用组件：

import {
    HashRouter as Router, Route, Switch, Redirect
} from 'react-router-dom';
const App = () => {
        const routes = (
            <Switch>
                <Route exact path="/" component={HomePage} />
                <Route exact path="/:page?" component={HomePage} /> // commenting this line out causes <Contact /> work properly, but then again pagination on HomePage doesn't work as I don't have parameter in the url.
                <Route exact path="/post/:uid" component={PostPage} />
                <Route exact path="/contact" component={ContactPage} />
                <Route exact path="/category/:category/:page?" component={CategoryPage} />
                <Route component={NotFoundPage} />
            </Switch>
        );
    
        return (
            <>
               <MetaDecorator/>
               <Router>
                 {routes}
               </Router>
            </>
        );
    };

谢谢

Answer 1

Switch 始终查看路线并呈现与您的路线匹配的第一条路线。

在这个例子中，你把 /:page 路由放到 Switch 的顶部。当 React 路由器查找您的路由时，它认为 "/contact" 中的 "contact" 单词是一个页面 ID，它应该呈现 /:page 路由。

您应该将 /:page 路线放在“未找到”之前，并尝试从您的路线中删除 exact 关键字，除了 /.

return (
  <Switch>
    <Route exact path="/" component={HomePage} />
    <Route path="/post/:uid" component={PostPage} />
    <Route path="/contact" component={ContactPage} />
    <Route path="/category/:category/:page?" component={CategoryPage} />
    <Route path="/:page?" component={HomePage} />
    <Route component={NotFoundPage} />
  </Switch>
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

也尝试使用 <BrowserRouter> 而不是路由器。

希望你的问题得到解决。

尽管匹配了确切的路线，但 React Router 组件不会呈现

React Router component doesn't render despite matching exact route

parameters

blogs

routes

reactjs