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
进入相应的组件
每个组件中都有一个二级导航进行切换,因为页面差异,我想按照上面的代码进行路由配置,请问要怎么配置,还是我的思路不对。
react-router的版本是多少?