1. 程式人生 > >react-使用二級路由的問題-一個是改地址,一個是次級路由與引用前面也要加主路由的地址

react-使用二級路由的問題-一個是改地址,一個是次級路由與引用前面也要加主路由的地址

一級路由直接在首頁,二級路由如:/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>)
    }
}