javascript - react 路由器 : Failed to Navigate Route

Question

我在 index.js 文件中设置了简单的路由。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';

import reduxThunk from 'redux-thunk';

import '../less/app.less';

import reducers from './reducers';

import App from './components/App';
import Login from './components/auth/Login';
import Welcome from './components/Welcome';

// const defaultSetting = settings;
const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <Router history={browserHistory}>
      <Route path="/" component={App}>
        <IndexRoute component={Welcome} />
        <Route path="login" component={Login} />
      </Route>
    </Router>
  </Provider>
  , document.querySelector('.container')
);

我的 App.js

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div>
                {this.props.children}
            </div>
        );
    }
}

export default App;

当我使用 webpack-dev-server 导航到 localhost:8080 时，我可以正确显示我的索引路由。但是当我导航到 localhost:8080/login' 它显示错误Cannot GET/login`。

有什么解决办法吗？

Answer 1

默认情况下，服务器将在 /login 路径中查找 html 文件。因此，您应该为 html5 导航配置它，以便为它接收到的任何路由返回 index.html。

---

编辑:

要在 webpack 中这样做，正如您在评论中所建议的那样，您可以将其添加到您的 webpack 开发服务器配置中:

historyApiFallback: true 

index.html 应该是默认的，所以不需要指定它。

另请注意，包含点的 url 仍指向文件，因此会重定向到服务器。例如，如果您有一个 url，例如 /search/firsname.lastname，您需要为此添加一个处理程序。

historyApiFallback: {
    rewrites: [
        {
            from: /^\/search\/.*$/,
            to: function() {
                return 'index.html';
            }
        }
    ]
},

参见 this issue了解更多信息。