阅读 2135

React路由实践,你选择静态路由还是动态路由?

一、前言

最近开始学习React的, 作为一只从Vue转世而来的React萌新,首当其冲的就是对路由的执着了, Vue在路由这一块的中心化,以及父子路由用的太顺手了, 一下子接受不了React教程中的路由写法, 所以想在React中也实现中心化的路由。

可通过右侧目录查看自己喜欢的写法,不影响阅读。

评论区可以用来讨论,也欢迎大手子斧正文中的错误。

实际开发中,落地一个功能肯定是有用处或者深意的,比如左侧点赞的功能。

二、简单说说react基本思路

教程可以看这里

经踩坑,教程版本有点老,IndexRoute在react-router4+已经不支持

但通过教程还是可以看出,首先React是建议在当前文件中非公用组件,通过React的React.createClass方法生成一个组件类(已过时),或者可以直接写成一个方法。

// 组件类
const Message = React.createClass({
  render() {
    return <h3>Message {this.props.params.id}</h3>
  }
})
// 直接写成函数通过return()返回dom即可
const Index = function(){
    return (
        <React.fragment> // React的占位标签 不实际渲染
            <p></this is Index>
            <Link to="/about">About</Link>
        </React.fragment>
    )
}
复制代码

上面这一段是因为我初用的时候就仿佛写Vue一样,在当前文件的根节点里写了太多的html,导致代码臃肿,希望看到本文的其他React萌新,能注意下这一点。

回到主题,React4开始,对路由进行了革命性的创新,让路由更符合React的“组件化”思想,从React3及之前的“中心化路由”(或称“静态”路由)改为“去中心化路由”(“动态路由”)。

而我很头铁,就是想在React新版本也用“中心化路由”,理由是好管理,路由清晰。(其实就是有点脑子轴了)

三、中心化路由(静态路由)写法

其实最开始, 是没有认真看完教程,对React的“组件化”思想理解不是很透彻,认为“组件化”是开发者的事,而框架还是停留在Vue,所以选择了“中心化路由”写法。 写法也很简单,如下。

// src/route.js
import Home from './pages/index/index';
import HomeNews from './pages/index/component/HomeNews';
import My from './pages/my/my';

const routes = [
  {
    path: "/my",
    component: My
  },{ // 路由是从新闻页的路由开始写的,首页默认显示的组件在下面,需要在首页文件中判断。
    path: "/",
    component: Home,
    children: [
      {
        path: "/news",
        component: HomeNews
      }
    ]
  }
]

export {
  routes
}

// src/index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import reportWebVitals from './reportWebVitals';

import {routes} from './route';
import {BrowserRouter} from 'react-router-dom';
import {renderRoutes} from 'react-router-config';

ReactDOM.render(
  (
    <BrowserRouter>
      {renderRoutes(routes)}
    </BrowserRouter>
  ),
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
复制代码

看完上面的代码,应该有小伙伴会疑惑,我为什么把默认路由(“/”)写在最下面,是因为我先开发的个人中心吗?

当然不是,是因为React路由匹配的原因。

在React中,路由默认是模糊匹配的,如果我写在上面,会导致个人中心的路由优先匹配到首页路由。

如果我给首页路由加上exact强匹配,会导致期望的父子组件无效

所以把首页路由写在最下面是无奈之举。

如果有小伙伴也希望在React中采用“中心化路由”的话,那么就需要考虑其中的取舍了,因为还有一个小细节,也是需要注意的。

项目中, Web的首页通常是顶部(Header)不动,下面的内容区(Main)随导航栏动态切换。

比如掘金,红框区域不会变更, 绿框部分随导航栏(首页路由)切换而动态加载。

image.png

掘金的绿框部分只是类容不同,而工作中,许多项目的绿框(Main)部分是布局也大不相同的,包括后台管理平台也是如此。

所以我在首页中加入了路由判断,以此来确认渲染那一部分的组件。

// src/pages/index/index.jsx
class index extends Component {
  constructor(props){
    super(props)
    this.state = {
      route: props.route
    }
  }

  // 判断用户访问地址,确认加载组件
  getPath(){ 
    let route = this.props.location.pathname
    return route === '/'
  }

  render() {
    const route = this.state.route;
    return (
      <div className={`${s['main']}`}>
        <HeaderTop />
        <div className="container">
         {/*默认路由时加载首页组件, 否则按路由加载组件*/}
          {this.getPath() ? <HomeMain /> : renderRoutes(route.children)}
        </div>
        <Footer />
      </div>
    );
  }
}
复制代码

至此,基本就是我写的“中心化路由”的全部思路及细节了。

四、去中心化路由(动态路由)核心思路

和刚刚教程中的内容类似,不过教程中很多组件都过时不支持了,这里是用的react-router-dom5.2.0的,实际开发中, react-router4+ 即可使用。

// /src/Party/party  这个目录是我的项目第二个板块,首页使用代码一致,不影响
import React,{Component} from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';

import Home from '...';
import News from '...';

class party extends Component {
  constructor(props){
    super(props)
  }
  render() {
    return (
      <div>
        <Router>
          // 这里要注意把导航放在Router内,否则会出现切换路由,组件不更新的情况
          <Nav />
          // 如果某个子组件临时想要隐藏头部,可以通过子组件调用父组件方法隐藏
          <Route exact path="/" component={Home} /> //保持显示header及默认首页内容
          <Route path="/new" component={News} />
        </Router>
      </div>
    );
  }
}

const Nav = props => {
  return (
    <nav className={s['nav']}>
      <div className="flex align-items">
        <Link to="/party" className={s['active']}>首页</Link>
        <Link to="/party">子页</Link>
      </div>
    </nav>
  )
}

export default party;
复制代码

五、总结

删除线删除的是修改前的内容, 在我慎重思考之后,还是选择了React的去中心化路由写法, 第一个板块已经写完了,就不改了,文中去中心化路由写法代码来自第二个板块。

如果你是新开始项目, 将核心代码应用在首页板块是可以正常使用不收影响的。

既来之先安之, 搞懂之后再搞事情, 初学的时候还是老老实实的。 加油,陌生人。

文章分类
前端
文章标签