react路由器dom中的Switch语句始终加载主路由，而不加载其他路由

Question

我试图建立一个404路由，这就是为什么我使用react-router-dom的交换机组件。我输入的任何路径都将继续呈现主路径。

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;

这是我的应用程序组件，使用上面的开关组件。ExpenseDashboard继续加载。

我正在使用react路由器dom 4.2和react v16并使用create react app创建此项目。

任何帮助都将不胜感激！

Answer 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>
    );
  }
}

阅读更多：关于GitHub