一级路由直接在首页,二级路由如:/dashboard/msg 这个msg页面如何展示,以及写在哪个页面?写在首页还是写在次级路由页面?
普通的嵌套方法根本不行;
在主路由页面加一个匹配所有的指向路由:<Route component={Dashboard}></Route>
然后他的下级路由才能匹配自己的分路由:
<Switch>
<Route path='/tt' exact component={Dashboard2}/>
<Route path='/tt6' exact component={Dashboard6}/>
</Switch>
由此也带来了一个问题,一旦路径错误,全都会显示dashboard,改变bundlejs的地址也不行
还是只能显示两个,一个什么都没有,一个有斜杠;
下面是主路由的写法---dashboard
class RouterMap extends React.Component {
render() {
return (<BrowserRouter><div>
<Switch>
<Route path='/' exact component={Home}/>
<Route path="/users" component={Users}/>
<Route path='/city' component={City}/>
<Route path='/city2' component={City2}/>
<Route path='/result' component={Result}/>
<Route match='match' path='/dashboar' exact component={Dashboard}/>
<Route path='/dashboard' component={Dashboard}/>
</Switch>
</div></BrowserRouter>)
}
}
下面是分路由的写法
class Dashboard extends React.Component {
componentDidMount(){
//console.log(this.props)
}
render() {
console.log(this.props)
const match=this.props.match
return (<div>
<div>123</div>
<Switch>
<Route path="/dashboard/1" component={Dashboard1}/>
<Route path="/dashboard/2" component={Dashboard2}/>
<Route path="/dashboard/6" component={Dashboard6}/>
</Switch>
</div>)
}
}