React-Router嵌套路由不起作用

克莱门特

重现步骤

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
片山卢卡斯(Lucas Katayama)

如果您更改为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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

React路由器嵌套路由不起作用

来自分类Dev

react-router中的嵌套路由

来自分类Dev

React Router,在参数后嵌套路由

来自分类Dev

React Router,在参数后嵌套路由

来自分类Dev

React Router Redirect在专用路由中不起作用

来自分类Dev

react-router-relay中的嵌套路由

来自分类Dev

在React-Router中找不到嵌套路由的字体

来自分类Dev

react-router v5 –嵌套路由

来自分类Dev

React Router 6 alpha 4嵌套路由

来自分类Dev

React Router Dom嵌套路由,或者如何传递

来自分类Dev

嵌套路由不适用于react-router

来自分类Dev

react-router-relay中的嵌套路由

来自分类Dev

无法使用React Router获得嵌套路由以进行匹配

来自分类Dev

React Router-无法渲染嵌套路由

来自分类Dev

React Router v4 - 嵌套路由问题

来自分类Dev

React Router V5:在动态路由中需要嵌套路由

来自分类Dev

React Router V5:在动态路由中需要嵌套路由

来自分类Dev

React JS 路由不起作用

来自分类Dev

react-router-创建没有组件嵌套的嵌套路由

来自分类Dev

React-Router:嵌套路由而不嵌套带有通配符路径的组件

来自分类Dev

React-Router:嵌套路由而不嵌套带有通配符路径的组件

来自分类Dev

如何使用 React Router - ReactJS 添加嵌套和非嵌套路由?

来自分类Dev

React Router:为什么嵌套路由使 React 在同一页面上呈现

来自分类Dev

如果我的基本路由相同,histroy.push()在React Router中不起作用

来自分类Dev

React Router-带有可选参数的路由不起作用

来自分类Dev

AngularJS嵌套路由器不起作用

来自分类Dev

Angular2嵌套路由不起作用

来自分类Dev

AngularJS嵌套路由器不起作用

来自分类Dev

react-redux-router不起作用

Related 相关文章

热门标签

归档