react-router-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-router-dom 4.2과 react v16을 사용하고 create-react-app을 사용했습니다.

도움이 될 것입니다.

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

또는 '정확한'만 제거 :

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