React路由层级构建

1、需求

最近在看一点React,稍微学习一点知识。在学习过程中照着书扒代码时发现书上的react-router部分的代码完全不能用。主要原因为书上的react-router版本是3.x,而且当前建立网页应用时一般使用的是react-router-dom库,版本已经是5.x,API有了巨大的变化。

比如原来的路由嵌套,现在完全没用了,IndexRoute、browserHistory等等也没有了。而且原来<Route />组件中的path=”home”前面可以不加“/”,但现在如果不写成“/home”,路由无法跳转到localhost/home页面。

现在练习时需要建立这样一个多页应用(伪):有一个登录页、一个404页、然后是业务页组,其中业务页均有个共同的导航页头或其他导航组件。

2、尝试失败记录

首先构建了登录页组件Login、404页组件NotFound、业务页组件 Home、User,以及导航组件Topbar。

书上的嵌套路由虽然似乎没用,但是似乎可以通过组件嵌套实现业务组件页有共同的Topbar:

//构建如下的Topbar,使其子组件正确渲染
import React from 'react';
import {Link} from 'react-router-dom';
const Topbar=({children})=>{
  return (
    <div>
      <ul>
        <li><Link to="/home">Home</Link></li>
        <li><Link to="/about">About</Link></li>        
      </ul>
      {children}
    </div>
  );
}
export default Topbar ;
//App如下
import {BrowserRouter as Router,Redirect,Route,Switch} from 'react-router-dom';
function App() {
  return (
    <div className="App">
      <Router> 
      <Switch>
        <Route exact path="/login" component={Login} />
        <Route exact path="/404" component={NotFound} />   
        <Topbar>
          <Route exact path="/" component={Home}/> 
          <Route exact path="/user" component={User} />
        </Topbar>  
        <Redirect to="/login"/>
      </Switch>  
      </Router>
    </div>
  );

结果是:路由可以生效,但不在路由表里的URL,无法由Redirect组件跳转到“/”路径,没有搞明白是什么情况。。所以还是不能用(试过把Topbar组件用withRouter包裹,但是也是同样问题)。

3、另一种方法(多级React路由)

这里在网上又看到另一种方法,把不需要共同导航的页面放在上面,业务页面构建二级路由:

function App() {
  return (
    <div className="App">
      <Router> 
      <Switch>
        <Route exact path="/login" component={Login} />
        <Route exact path="/404" component={NotFound} />              
        <Route  path="/" component={Root}/>    //二级路由入口,由一个新的Root组件进入,注意不能使用exact                     
      </Switch>  
      </Router>
    </div>
  );
}

export default App;



// Root组件内容
export default ()=>{
  return (
    <div>
      <Topbar/>
<Switch>
      <Route exact path="/user" component={User}/>
      <Route exact path="/" component={Home}/>
      <Redirect to="/404" />   //注意应把<Redirect/>组件放在这里,不能放在App组件里,因为要跳转的组件也是“/”路由的子URL,会命中 <Route  path="/" component={Root}/>而进入Root组件,不会匹配放在下面的<Redirect/>
<Switch>

    </div>
  );
}

通过该方法可以实现想要达到的目的(注意二级路由里要加<Switch>)。

4、注意

使用history.push(path)方法时,此history应从useHistory()获得(useHistory在react-router-dom包里导入),不能从createBrowserHistory()获得(createBrowserHistory是在history包里导入),否则会URL变更,但组件不更新。

5、总结

目前还是在学习中,因为也没到看源码之类的这种高级学习程度,搞不清楚具体是什么原因导致第一种方法不行。先记录下学习过程,因为忘的比较快,后面再试试。

--------------------------------

除非注明,否则均为清风揽月阁原创文章,转载应以链接形式标明本文链接

本文链接:https://www.iimm.ink/245.html

发表评论

邮箱地址不会被公开。 必填项已用*标注

回到顶部