リアクションルータのプッシュではURLのみが変更されます

Question

リアクションルータを使用していますので、クリックしたときに詳細ページにリダイレクトしたいと思います。ここで

は私のコンポーネント変更しましたが、私のページは同じまま、URLをクリックしてオン

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

私は理由がわかりません、これはアプリケーション内の他の場所で動作しています。私もチェックして、これは

programmatically-navigate-using-react-router

私が何かを見逃していました

react-router-push-only-changes-the-url-and-does-not-navigate

• browserhistory-push-doesnt-navigate-to-new-page
  をスレッド試してみましたか？

  ---

  詳細

  私のルータDashboardLayoutは、いくつかのコンポーネント

  にそのラップの子供たちの反応構成要素である

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

  次createRoutesの方法で

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

  のように見えます

  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は見えTypeContainerが返さ

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

  等からTable（Reduxのストアに）接続された「

  TypeDetailsRoute

  が全く同じであるtoolbox`反応し、私はパスを指定

  ここでTypeDetailsContainer返すものTableとはまったく異なっています。あなたはこれを実現するためにLinkコンポーネントを使用することができます私は簡単なh1にしようと、私はまだエラーに

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

Answer 2

を持っている：

import { Link } from 'react-router' 

... 

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