Question

我已经安装了React Router并使用了browserHistory，但是当我手动输入网址时，我得到Cannot GET /:path。

为什么会出现这种情况？

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import {Router, browserHistory} from 'react-router';
import routes from './config/routes';

ReactDOM.render(<Router history={browserHistory} routes={routes} />, document.getElementById('app'));

routes.js

import React from 'react';
import {Route, IndexRoute} from 'react-router';

import App from '../components/app';
import Dashboard from '../components/dashboard';
import Expenditure from '../components/expenditure';
import Income from '../components/income';
import Transactions from '../components/transactions';

export default(
    <Route path='/' component={App}>
        <IndexRoute component={Dashboard} />
        <Route path='expenditure' component={Expenditure} />
        <Route path='income' component={Income} />
        <Route path='transactions' component={Transactions} />
    </Route>
);

单击导航将使用正确的路线完美显示内容。

使用webpack编译webpack-dev-server。

谢谢：）

Answer 1

您必须将所有非文件请求重定向到index.html，这是browserHistory工作所必需的。

在webpack-dev-server中有一个选项historyApiFallback，您必须将其设置为true才能实现。{}

有关详细信息，请参阅webpack documentation

new WebpackDevServer(compiler, {
    historyApiFallback: true

    // ...
})

Answer 2

我今天遇到了同样的问题，无法在stackoverflow中找到答案。让output.publicPath：devServer.historyApiFallback.index中的路径等于webpack-dev-server，指出html文件路径 .my module.exports = { entry: "./src/app/index.js", output: { path: path.resolve(__dirname, 'build'), publicPath: 'build', filename: 'bundle-main.js' }, devServer: { historyApiFallback:{ index:'build/index.html' }, }, //其他的配置省略 };版本是1.10.1并且运行良好。 http://webpack.github.io/docs/webpack-dev-server.html#the-historyapifallback-option无法正常工作，您必须指出html文件路由。

例如：

historyApiFallback.index

webpack-dev-server表示当网址路径与真实文件不匹配时，historyApiFallback.index使用react-router中的文件配置在浏览器而不是404页面中显示。然后关于你的路线改变的所有事情让你的js使用img来做。

无法获取/手动输入的URL - React Router

2 个答案: