react-router-domのSwitchステートメントは、常にホームルートをロードしており、他のルートはロードしていません。

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を使用しています。

ご協力いただければ幸いです！

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

OR '正確' は削除します

Answer 1

あなたは次の行を削除する必要があります。

その後、いくつかのナビゲーションリンク。

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