关于HasRouter和BrowserRouter

1:BrowserRouter里面嵌套HashRouter时,HasRouter路径从“/”开始

<HashRouter>
     <Switch>
          {/*HashRouter 为神魔不能重定向*/}
          <Redirect  to={{ pathname: '/son1' }} />
          {/*    <Redirect exact from={"/content"} to={'/content/son1'} />
          <Redirect exact from={"/"} to={'/content/son1'} />*/}

          <Route exact path="/">		// 这个地方直接用/就可以访问到Son1
            <Son1 />
          </Route>

          <Route path="/son2">
            <Son2 />
          </Route>

          <Route render={ ()=> { return <div>content找不到子路由</div> } }/>
        </Switch>
        </HashRouter>

//-----------------------------------------------------------------------------------------------BrowserRouter
<Router basename={'diseaseList'}>			//BrowserRouter需要设置父级路由
      <Switch>
        <Route path={ '/' }  exact={ true } component={ DiseaseList } />
        <Route path={ '/diseaseAdd' }  exact={ true } component={ DiseaseAdd }/>
  </BrowserRouter>

2:HashRouter不能使用Redirect重定向(不知为何)
3:HashRouter不能通配符传参 ,BrowserRouter可以

//BrowserRouter打印的this.props
{"history":{"length":27,"action":"PUSH","location":
{"pathname":"/diseaseUpdate/10","search":"","hash":"","key":"0uacjh"}},"location":
{"pathname":"/diseaseUpdate/10","search":"","hash":"","key":"0uacjh"},"match":
{"path":"/diseaseUpdate/:id","url":"/diseaseUpdate/10","isExact":true,"params":{"id":"10"}}}

//HashRouterRouter打印的this.props
{"history":{"length":29,"action":"POP","location":
{"pathname":"/diseaseUpdate/10","search":"","hash":""}},    "location":
{"pathname":"/diseaseUpdate/10","search":"","hash":""},"match":
{"path":"/","url":"/","params":{},"isExact":false}}

4:当BrowserRouter下嵌套HashRouter时,(HashRouter组件对应“/HashRouter”路径)
HasRouter的根路由为BrowserRouter的/HashRouter路径,HashRouter组件只能在/HashRouter下的子路由内跳转,无法跳转到/下的路由

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值