React 路由器推送仅更改 url

Posted 2023-02-21

【中文标题】React 路由器推送仅更改 url

【英文标题】：React router push only changes the url

【发布时间】：2017-03-29 15:53:15

【问题描述】：

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

这是我的组件

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

我找不到原因，这在应用程序的其他任何地方都有效。我也检查并尝试了这个线程

browserhistory-push-doesnt-navigate-to-new-page react-router-push-only-changes-the-url-and-does-not-navigate programmatically-navigate-using-react-router

我错过了什么吗？

---

更多详情

我的路由器看起来像

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 从 '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，但我仍然有错误

【问题讨论】：

我看到你正在异步加载减速器并且可能使用store.replaceReducer。那工作正常吗？我的意思是我曾经看到过类似的行为；路线发生了变化，但新页面没有呈现，因为更换减速器出错并在我的控制台中引发了一些错误。 :)

它似乎工作正常。它正在与其他路线一起使用，我在控制台中没有一个错误

有整个项目的github链接吗？

恐怕不行，这是公司项目，我无权分享

【参考方案1】：

我解决了！！！

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

【参考方案2】：

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

import  Link  from 'react-router'

...

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

【讨论】：

我正在使用react-toolbox Table 组件，所以我不知道是否可以通过Link 更改所有行。有没有等价的方法可以调用？

看来Link 组件也在使用push 方法（sources）

@ThomasThiebaud 你能用<Router> 渲染的组件更新问题吗？如果 URL 正在改变，但页面视觉上没有更新，那么 React 很可能在说“没有改变，不需要重新渲染”。所以我认为它与路线没有任何关系（你的方法应该可以正常工作）。

我在我的问题中添加了更多细节