react-react-dom中的Switch语句总是加载Home路由而没有其他路由

Question

我正在尝试设置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;

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

我正在使用react-router-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>
    );
  }
}

阅读更多： On GitHub