React router push仅更改url

Question

我正在使用react路由器，我想通过单击一行重定向到详细页面。

这是我的组件

<Table
  model={TypeModel}
  source={this.props.types}
  selectable={false}
  onRowClick={index => this.context.router.push(`/dashboard/types/${this.props.types[index].id}`)}
/>

单击url时，url将更改，但我的页面保持不变。我是这样定义路线的

{
  path: '/dashboard',
  component: requireAuthentication(DashboardLayout),
  indexRoute: Dashboard,
  childRoutes: [{
    path: 'types',
    indexRoute: TypeListRoute(store),
    childRoutes: [
      TypeDetailsRoute(store) // The path of this route is :id
    ]
  }]
}

我不知道为什么，这是工作在其他地方的应用程序。我也检查并尝试了这个线程

• Browser History push无法导航到新页面

我错过什么了吗？

我的路由器看起来像

const routes = createRoutes(store)
<Router history={browserHistory} children={routes} />

使用以下createRoutes方法

createRoutes = store => ({
  childRoutes: [{
    path: '/',
    component: HomeLayout,
    indexRoute: Home,
    childRoutes: [
      LoginRoute(store),
      LogoutRoute(store),
      SignupRoute(store)
    ]
  }, {
    path: '/dashboard',
    component: requireAuthentication(DashboardLayout),
    indexRoute: Dashboard,
    childRoutes: [
      DeviceRoute(store),
      UserRoute(store),
      {
        path: 'types',
        indexRoute: TypeListRoute(store),
        childRoutes: [
          TypeDetailsRoute(store)
        ]
      }
    ]
  }]
})

仪表板布局是一个react组件，它将子级封装到一些组件中

export class DashboardLayout extends React.Component {
  constructor (props) {
    super(props)
    this.children = props.children
  }

  render () {
    return ( 
      <Layout theme={drawerTheme}>
        <NavDrawer pinned >...</NavDrawer>
        <Panel>
          {this.children}
        </Panel>
      </Layout>
    )
  }
}

TypeListRoute如下所示

export const TypeListRoute = store => ({
  getComponent (nextState, cb) {
    require.ensure([], (require) => {
      const Type = require('./containers/TypeContainer').default

      const reducer = require('./modules/type').default

      injectReducer(store, { key: 'type', reducer })

      cb(null, Type)
    }, 'type')
  }
})

其中TypeContainer从“react工具箱”返回连接的（到redux存储）表`

TypeDetailsRoute完全相同，但我指定了一个路径

export const TypeDetailsRoute = store => ({
  path: ':id',
  getComponent (nextState, cb) {
    require.ensure([], (require) => {
      const Type = require('./containers/TypeDetailsContainer').default

      const reducer = require('./modules/type').default

      injectReducer(store, { key: 'type', reducer })

      cb(null, Type)
    }, 'type')
  }
})

这里TypeDetailsContainer返回的东西与Table完全不同。我尝试了一个简单的h1，我仍然有错误




Answer 1

我解决了！！！

在createRoutes方法中，我必须通过其异步版本getChildRoutes更改rootChilRoutes。

因此，createRoutes方法变成（TypeLine重新组合TypeListRoad和TypeDetailRoad）

export const createRoutes = store => ({
  getChildRoutes (nextState, cb) {
    cb(null, [{
      path: '/',
      component: HomeLayout,
      indexRoute: Home,
      childRoutes: [
        LoginRoute(store),
        LogoutRoute(store),
        SignupRoute(store)
      ]
    }, {
      path: '/dashboard',
      component: requireAuthentication(DashboardLayout),
      indexRoute: Dashboard,
      childRoutes: [
        DeviceRoute(store),
        UserRoute(store),
        TypeRoute(store)
      ]
    }])
  }
})

Answer 2

您可以使用Link组件来完成此操作：

import { Link } from 'react-router'

...

<Link to={`/dashboard/types/${this.props.types[index].id}`}>Dashboard page</Link>