Question

重现的步骤

client.js（输入文件）

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

import reducers from './reducers';
import routes from './routes.js';

const storeWithMiddleware = applyMiddleware(reduxThunk)(createStore);
const store = storeWithMiddleware(reducers);

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

routes.js（ver 1）

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

import App from './components/bases/app.js';
import Login from './components/app/authentication/login.js';

export default(
  <Route path="/" component={App}>
    <Route path="signup" component={Login}/>
  </Route>
)

routes.js（第2版）

let routes = {
  path: '/',
  component: App,
  childRoutes: [
    { path: 'signup', component: Login }
  ]
}

export default routes;

预期行为

期望/signup路线可用。

实际行为

react-router找不到路由/signup但可以找到/

看一下chrome dev-tools source-tab，我就找到了这个：

查看＆＃34; /＆＃34;

sources
--------
dist/prod
|     bundle.js
index.html

查看＆＃34; /注册＆＃34;

sources
--------
signup

Answer 1

如果您更改为hashHistory并且它有效，它可能是您的后端，它提供HTML ...

由于hashHistory的工作原理如下：

example.com/#/signup

如果你使用browseHistory，浏览器并不理解为新的GET，这个：

example.com/signup

再次发出浏览器对index.html的请求，但是在路径/注册...但是webpack dev服务器可能不太了解.. 尝试将historyApiFallback：true添加到webpack配置中喜欢这个

https://github.com/amacneil/react-router-webpack-history-example

Answer 2

赠品是您查看来源时正在提供的文件。当您尝试加载/signup页面时，您的浏览器正在尝试加载signup页。

当您使用browserHistory时，您需要为所有可能的路线提供index.html（以及其中包含的所有脚本）。这意味着您需要一台服务器接受所有可能的路由并做出相应的响应。

例如，如果使用express运行节点服务器，则需要使用通配符路由处理程序：

// define static handler first for .js, etc.
app.use(express.static(path.join(__dirname, 'public')));

// all other routes should server your index.html file
app.get("/", handleRender);
app.get("*", handleRender);

function handleRender(req, res){
  res.sendFile(__dirname + '/index.html');
}

React-Router Nested路由不起作用

重现的步骤

预期行为

实际行为

2 个答案: