react-router-dom 中的 Switch 语句始终加载 Home 路由，没有其他路由

Posted 2023-02-22

【中文标题】react-router-dom 中的 Switch 语句始终加载 Home 路由，没有其他路由

【英文标题】：Switch Statement in react-router-dom is always loading the Home route and no other route

【发布时间】：2018-04-07 07:09:54

【问题描述】：

我正在尝试设置 404 路由，这就是我使用 react-router-dom 的 Switch 组件的原因。我输入的任何路径都将继续渲染主路径。

import React,  Component  from 'react';
import ExpenseDashboard from './components/ExpenseDashboard'
import AddExpensePage from './components/AddExpensePage'
import HelpPage from './components/HelpPage';
import EditPage from './components/EditPage';
import Header from './components/Header';
import NoMatch from './components/NoMatch';
import BrowserRouter, Route, Switch from 'react-router-dom';

class App extends Component 
  render() 
    return (
      <BrowserRouter>
        <Switch>
          <Route exact path='/' component=ExpenseDashboard />
          <Route path='/create' component=AddExpensePage />
          <Route path='/Edit' component=EditPage />
          <Route path='/Help' component=HelpPage />
          <Route component=NoMatch />
        </Switch>
      </BrowserRouter>
    );
  


export default App;

那是我的应用组件使用上面的 switch 组件。 ExpenseDashboard 继续加载。

我正在使用react-router-dom 4.2 和react v16 并使用create-react-app 来制作这个项目。

任何帮助将不胜感激！

【问题讨论】：

您可以将path="*" 添加到您的404 路由吗？即<Route path="*" component=NoMatch />

您的代码按预期工作。我在codesandbox.io/s/x2q2jz2l3o 创建了一个沙箱，它显示了预期的输出。

【参考方案1】：

您需要删除以下行：

<Route exact path='/' component=ExpenseDashboard />

或者只删除“精确”。

然后是一些导航链接。看到这个：

class App extends Component 
  render() 
    return (
      <BrowserRouter>
        <Link to='/create'> Create </Link>
        <Link to='/ExpenseDashboard'> Expense Dashboard </Link>
        <Switch>
          <Route path='/ExpenseDashboard' component=ExpenseDashboard />
          <Route path='/create' component=AddExpensePage />
          <Route path='/Edit' component=EditPage />
          <Route path='/Help' component=HelpPage />
          <Route component=NoMatch />
        </Switch>
      </BrowserRouter>
    );
  

阅读更多： On GitHub

【讨论】：

这个答案不正确。提问者的路由结构是健全的。问题出在其他地方。很可能是他的网址。