React Router v4の経路が動作しない

Question

私は比較的新しい反応を示しています。私はReactルータを動作させる方法を理解しようとしています。私はこのようになります超簡単なテストアプリケーションを持っている：

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

私は問題なくアプリにホームコンポーネントのロードを実行して、私がクリックしたときに「私をクリックして」localhostにURLの変更をリンクする際に/しかし、何も起こりません。私がリフレッシュをクリックすると、「Can not GET/about」が表示されます。明らかに私は間違ったことをしていますが、私は何を理解することができませんでした。私もWebpackを使用しています。

Answer 1

/の正確なパスを使用する必要があります。それ以外の場合は、​​と一致します。私は、サーバーのコードとあなたのWebPACKの設定がすべて正しいことを確認します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を追加する必要がローカルホストから実行している場合はtrue、あなたのwebpack.configファイルへ