我的反應路由器在某些路由上不起作用

Question

我正在學習反應。在我的index.js文件，我有以下代碼：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './components/App.jsx'; 
import Users from './components/Users.jsx'; 
import { Router, Route, IndexRoute, browserHistory } from 'react-router'; 

ReactDOM.render((
     <Router history={browserHistory}> 
      <Route path="/" component={App} /> 
      <Route path="/users" component={Users} /> 
     </Router> 
    ), document.getElementById('root') 
); 

這是

<Route path="/" component={App} /> 

作品第一條路線，但第二條路線

<Route path="/users" component={Users} /> 

不起作用。我得到了'無法GET /用戶'錯誤。

Answer 1

看來問題是路由不在服務器端處理。

你可以不喜歡你的服務器上執行以下操作：

app.get('*', function (request, response){ 
    response.sendFile(path.resolve(__dirname, 'public', 'index.html')) 
}) 

Answer 2

我會建議你做的是有一個父佈局組件，然後讓你的路由作爲父組件的子路由

說你的父組件就像

export default class Layout extends React.Component { 

    render() { 
     return (
      <div>{this.props.children}</div> 
     ) 
    } 
} 

現在你可以有一個像

你的路由

import Users from './components/Users.jsx'; 
import Layout from './components/Layout.jsx'; 
import { Router, Route, IndexRoute, browserHistory } from 'react-router'; 

ReactDOM.render((
     <Router history={browserHistory}> 
      <Route path="/" component={Layout} > 
       <IndexRoute component={App}/> 
       <Route path="/users" component={Users} /> 

     </Router> 
    ), document.getElementById('root') 
); 

此外，由於使用的是browserHistory，如果你嘗試直接通過URL訪問它，你會得到一個錯誤

爲了解決這個在您的WebPack webpack添加historyApiFallback: true