react 路由配置

react-router v4 路由器设置:

const routes  = [
      {
          path:'/',
          exact:true,
          component:createLoadableComp('views/home/index')
      },
      {
          path:'/product',
          component:createLoadableComp('views/product/index'),
          children:[
              {
                  path:'product/waiguan',
                  component:createLoadableComp('views/product/waiguan'),
              },
              {
                path:'product/peizhi',
                component:createLoadableComp('views/product/peizhi')
            }
          ]
       
      },
    ]

产品首页:

export default class PorductIndex extends Component {
    render(){
        return(
            <div>
                <div className="other">产品首页单有区域</div>
                <nav>
                    <Link to="/product">产品首页</Link>
                    <Link to="/product/waiguan">产品外观</Link>
                    <Link to="/product/peizhi">产品配置</Link>
                </nav>
                <div className="main">
                        产品首页
                </div>
            </div>
        )
    }
}

产品外观:


    export default class PorductWaiguan extends Component {
    render(){
        return(
            <div>
                <nav>
                    <Link to="/product">产品首页</Link>
                    <Link to="/product/waiguan">产品外观</Link>
                    <Link to="/product/peizhi">产品配置</Link>
                </nav>
                <div className="main">
                     产品外观
                </div>
            </div>
        )
    }
}

产品配置:

export default class PorductWaiguan extends Component {
    render(){
        return(
            <div>
                <nav>
                    <Link to="/product">产品首页</Link>
                    <Link to="/product/waiguan">产品外观</Link>
                    <Link to="/product/peizhi">产品配置</Link>
                </nav>
                <div className="main">
                    产品配置
                </div>
            </div>
        )
    }
}

问题如下
我想在进入/product/product/waiguan/product/peizhi 进入相应的组件
每个组件中都有一个二级导航进行切换,因为页面差异,我想按照上面的代码进行路由配置,请问要怎么配置,还是我的思路不对。

阅读 1.9k
1 个回答

react-router的版本是多少?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题