Switch Anweisung in react-router-dom lädt immer die Home-Route und keine andere Route

Question

Ich versuche eine 404-Route einzurichten, weshalb ich die Switch-Komponente von react-router-dom verwende. Jeder Pfad, den ich einstelle, wird weiterhin die Home-Route rendern.

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; 

das ist meine App-Komponente mit der Switch-Komponente oben. Das ExpenseDashboard wird weiterhin geladen.

Ich verwende react-router-dom 4.2 und react v16 und verwendet create-react-app, um dieses Projekt zu machen.

jede Hilfe wäre willkommen!

Answer 1

Sie müssen die folgende Zeile entfernen:

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

Oder entfernen Sie nur 'genau'.

Dann einige Navigationslink. Siehe dazu:

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

Mehr lesen: On GitHub