更多细节

Question

我使用的是反应路由器，我想在点击一行时重定向到详细页面。

这是我的组件

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

点击更改的网址，但我的网页保持不变。我定义了像这样的路线

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

我找不到原因，这在应用程序的其他地方都有效。我也检查过并试过这个帖子

我错过了什么吗？

更多细节

我的路由器看起来像

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)
        ]
      }
    ]
  }]
})

DashboardLayout是将儿童包装成某些组件的反应组件

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从＆＃39; react-toolbox`返回已连接（到redux商店）Table

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

您可以使用Link组件来完成此任务：

import { Link } from 'react-router'

...

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

Answer 2

我解决了!!!

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

因此createRoutes方法变为（TypeRoute重新组合TypeListRoute和TypeDetailRoute）

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)
      ]
    }])
  }
})

React router push仅更改url

更多细节

2 个答案: