React Router：导航路线失败

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' it shows errorCannot GET /login`.

有什么解决办法吗？

Answer 1

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

编辑：

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

historyApiFallback: true

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

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

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

有关详细信息，请参阅 this issue。

React Router：导航路线失败

React Router: Failed to Navigate Route

javascript

reactjs

webpack

react-router

webpack-dev-server

编辑：