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>)
    }
}


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值