react-使用二級路由的問題-一個是改地址,一個是次級路由與引用前面也要加主路由的地址
阿新 • • 發佈:2019-02-07
一級路由直接在首頁,二級路由如:/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>) } }