React 路由被连接到而不是刷新到预期的路由答案

【问题标题】：React route being concatenated to rather than refreshed to intended routeReact 路由被连接到而不是刷新到预期的路由
【发布时间】：2021-04-09 13:36:00
【问题描述】：

我在 App.js 中的路线如下：

import { BrowserRouter, Route, Switch } from 'react-router-dom';
import NavBar from './components/NavBar';
import Home from './components/Home';
import About from './components/About';
import SinglePost from './components/SinglePost';
import Post from './components/Post';

function App() {
  return (
    <BrowserRouter>
      <NavBar />

      <Switch>
        <Route path='/' exact component={Home} />
        <Route path='/about' component={About} />
        <Route path='/post' exact component={Post} />
        <Route path='/post/:slug' component={SinglePost} />
      </Switch>
    </BrowserRouter>
  );
}

这些路由在浏览器中运行良好，直到需要导航到来自 '/post/:slug' 的路由...从该路由，所有内容都连接到 '/post' 路由，如 '/post/about ' 或 '/post/post'。从 'post/:slug' 刷新到其预期路由的唯一路由是 home ('/')。

我无法弄清楚为什么从 SinglePost 到 Home 的路由按预期工作，但其他路由在开头保留“/post/”。

我绝不是 React 或 React Router 专业人士，所以很明显，由于我的经验不足，我只是想念一些东西。

提前致谢！

【问题讨论】：

标签： reactjs routes react-router react-router-dom

【解决方案1】：

重新排列<Switch> 中的路由顺序并删除exact 属性：

function App() {
  return (
    <BrowserRouter>
      <NavBar />

      <Switch>
        <Route path='/post/:slug' component={SinglePost} />
        <Route path='/post' component={Post} />
        <Route path='/about' component={About} />
        <Route path='/' component={Home} />
      </Switch>
    </BrowserRouter>
  );
}

我通常建议将最具体的路线放在最前面，因为<Switch> 将始终选择第一个匹配的路线，这样您就不需要使用exact（至少在您的示例中），这可以有时会很棘手。

【讨论】：

感谢您的输入，但在重新排列路线顺序后仍会出现相同的行为。我无法解释为什么 Home 路由在 SinglePost 路由中可以正常工作，但其他路由都没有。
我明白了。你能分享一下你是如何在路线之间导航的吗（例如history.push() 或<Link>）？
这是 Post.js 文件中单个帖子的链接：<Link to={"/post/" + post.slug.current} key={post.slug.current}>
NavBar.js 链接为<NavLink to="/">Home</NavLink>、<NavLink to "post">Blog Posts</NavLink> 和<NavLink to="about">About</NavLink>。
哦，我猜它正在连接您的路线，因为您的<NavLink> 在路线之前没有/。在这种情况下，它会附加到当前位置。尝试将其添加为 <NavLink to="/about"}> 例如...应该可以解决问题

【解决方案2】：

@vpalmerini 的评论是解决方案：

哦，我猜它正在连接您的路线，因为您的在路线之前没有 / 。在这种情况下，它附加到当前位置。尝试将其添加为 for 实例...应该可以解决问题 - @vpalmerini

【讨论】：