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(版本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,这就是我发现的内容:
当看“ /”时
sources
--------
dist/prod
| bundle.js
index.html
在查看“ / signup”时
sources
--------
signup
如果您更改为hashHistory并且它起作用了,则可能是您的后端,它提供了html ...
由于hashHistory的工作方式如下:
example.com/#/signup
浏览器无法理解为新的GET,如果您使用browserHistory,则这是:
example.com/signup
再次向浏览器发出index.html请求,但在路径/ signup上...但是webpack开发服务器可能不理解。。尝试添加historyApiFallback:true到webpack配置中
https://github.com/amacneil/react-router-webpack-history-example
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句