React Router v4 라우트가 작동하지 않습니다.

Question

저는 반응이 비교적 새로운데 어떻게 반응 라우터를 작동시키는 지 알아 내려고하고 있습니다. I는 다음과 같습니다 슈퍼 간단한 테스트 응용 프로그램을 가지고 :

import React from 'react'; 
import ReactDOM from 'react-dom'; 

import {BrowserRouter as Router, Route, Switch, IndexRoute, Link} from 'react-router-dom'; 

const Home =() => <h1><Link to= "/about">Click Me</Link></h1> 
const About =() => <h1>About Us</h1> 

const Test =() => (
    <Router> 
    <Switch> 
    <Route path ="/" component = {Home} /> 
    <Route path ="/about" component = {About} /> 
    </Switch> 
    </Router> 
) 

ReactDOM.render(<Test />, document.getElementById('app')); 

나는 어떤 문제없이 응용 프로그램을 홈 구성 요소로드를 실행하고 나는 클릭 할 때 "나를 클릭"로컬 호스트의 URL 변경을 연결할 때/그러나 아무 일도 일어나지 않습니다. 새로 고침을 클릭하면 '가져올 수 없음'이 표시됩니다. 분명히 나는 ​​잘못된 것을하고 있지만 무엇을 알아낼 수 없었습니다. 나는 또한 Webpack을 사용하고있다.

Answer 1

/의 정확한 경로를 사용해야합니다. 그렇지 않으면 /about과 일치합니다. 나는 당신의 서버 코드와 웹팩 설정이 모두 올바른지 확인합니다 Create React App를 사용하여 제안이 간단한 무언가를, 코멘트에서 언급 한 바와 같이

<Route exact path="/" component={Home} /> 

. create-react-app을 사용한 후에는 npm을 사용하여 반응 라우터 v4 패키지를 설치 한 다음 위의 코드를 App.js 파일에 넣으면 제대로 작동합니다. 아래에서 볼 수 있듯이이 create-react-app와 함께 작동하도록하는 코드에 대한 몇 가지 작은 변화가 있습니다

// App.js 
import React from 'react'; 

import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'; 

const Home =() => <h1><Link to="/about">Click Me</Link></h1> 
const About =() => <h1>About Us</h1> 

const App =() => (
    <Router> 
    <Switch> 
     <Route exact path="/" component={Home} /> 
     <Route path="/about" component={About} /> 
    </Switch> 
    </Router> 
) 

export default App; 

quick start instructions from React Router V4 documentation 거의 같은 난 그냥 설명 된대로 말할 것이다.

Answer 2

당신이 historyApiFallback 추가 할 필요가 로컬 호스트에서 실행하는 경우