反应路由器和链接都指向同一页面？答案

【问题标题】：React Router and Links all directing to the same page?反应路由器和链接都指向同一页面？
【发布时间】：2021-01-24 15:21:38
【问题描述】：

我想弄清楚为什么反应链接列表都只是加载错误页面。有人可以建议吗？它几乎是之前完美运行的项目的直接副本。

路由器设置

function App() {
  return (
  <Router>
    <Switch>
      <Route exact path = '/'>
        <Home />
      </Route>
      <Route path = "*">
        <Error />
      </Route>
      <Route path = '/about'>
        <About />
      </Route>
      <Route path = '/contact'>
        <Contact />
      </Route>
      <Route path = '/deckbuilder'>
        <DeckBuilder />
      </Route>
    </Switch>
  </Router>
  )
}

export default App;

主页上的链接


export const Home = () => {
    return (
        <div>
            <h1> Home Page </h1>
            <Link to = '/contact'>
                Contact
            </Link>
            <Link to = '/about'>
                about
            </Link>
            <Link to = '*'>
                Error
            </Link>
            <Link to = '/deckbuilder'>
                Deck
            </Link>
        </div>
        
    )
}

【问题讨论】：

尝试将错误路径移到最后。 iirc react 路由器重定向到第一个匹配的，所以在这种情况下，总是会出错
工作，奇怪，因为这根本没有发生在我的上一个项目中

标签： reactjs react-router

【解决方案1】：

你应该像这样使用react router，最后放错误组件，这是正确的语法：

        <Switch>
            <Route exact path='/' component={Landing} />
            <Route exact path='/sign' component={Sign} />
            <Route exact path='/login' component={Dashboard} />
            <Route component={GenericNotFound} />
        </Switch>

【讨论】：

【解决方案2】：

我将在@Shivam Jha 答案中添加更多信息。

工作，奇怪，因为这根本没有发生在我的上一个项目中

如果您的路由器配置与上述相同，则无法在以前的项目中使用此功能。此问题并非特定于 React 路由器。即使在开发后端应用程序时也会发生这种情况。

造成问题的是 start(*) 标记。该标记代表任何值。也就是说，您的代码的第二个路由器声明，即<Error /> 的路由在每次 url 与 *. 也就是说，

/abcd
/sign
/login

以上所有路径都匹配*。所以 React 路由器甚至不检查下一个路由器声明。它只是路由到<Error /> 页面。因此，作为解决方案，您应该始终在配置顶部声明静态路由，而在底部定义 *、:id 等内容

另一种情况是，如果你有两条路线

abcd.com/posts
abcd.com/:id

那么如果您在abcd.com/posts 上方定义了abcd.com/:id，那么您将永远无法向/posts 端点发送请求。这不仅特定于 React 路由器。即使在做后端开发时，您也必须意识到这一点。

【讨论】：