反應路由器v4路由不工作

我是比較新的反應，我想弄清楚如何讓React路由器工作。我有一個超級簡單的測試程序，看起來像這樣：反應路由器v4路由不工作

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改變爲localhost /關於，但是沒有任何反應。如果我點擊刷新，我會得到一個「無法獲取/關於」。很明顯，我做錯了什麼，但我一直無法弄清楚什麼。我也在使用Webpack。

來源

2017-04-17 WebbH

是否有在控制檯中的任何消息？這可能是「About」組件的問題，而不是路由器本身。另外，嘗試將'About'組件放在*/*路徑上以查看會發生什麼。 – gretro

RE：無法GET/about：考慮使用[create-react-app]（https://github.com/facebookincubator/create-react-app）。這是Facebook的祝福，使服務器成爲開發中的開箱即用功能，以及許多其他開發工具。沒有它，你需要管理自己的所有路由到index.html，或者在react-router中使用hash路由器。 –

您需要使用/的準確路徑，否則它也將匹配。

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

正如在評論中提到的，這個東西簡單我會建議使用Create React App這將確保你的服務器代碼和你的WebPack設置是正確的。一旦你使用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會告訴你幾乎相同正如我剛纔解釋。

來源

2017-04-17 18:40:43