React-router v4 路由配置方法小结

网络编程 2024/11/19 佚名

3 1 2

本文主要介绍了React-router v4 路由配置方法小结，分享给大家，也给自己留个笔记

一. Switch 、Router 、Route三者的区别

1、Route

Route 是建立location 和 ui的最直接联系

2、Router

react-router v4 中，Router被拆分成了StaticRouter、MemoryRouter、BrowserRouter、HashRouter、NativeRouter。

MemoryRouter、BrowserRouter、HashRouter 等于

import { Router } from 'react-router'
<!--这里可以有三种-->
<!--history 部分源码
exports.createBrowserHistory = _createBrowserHistory3.default;
exports.createHashHistory = _createHashHistory3.default;
exports.createMemoryHistory = _createMemoryHistory3.default;
-->
import createBrowserHistory from 'history/createBrowserHistory'
//
const history = createBrowserHistory()

<Router history={history}>
 <App/>
</Router>

NativeRouter（给rn使用的）

A <Router> for iOS and Android apps built using React Native.

这里新增strict 和 exact

使用了strict location 大于等于path才能匹配,eq path='/one' location='/one/a'能匹配。

使用了exact location 约等于 path 才能匹配,eq path='/one' location='/one'或者 '/one/'能匹配，所以说是约等于。

使用了exact 和 strict location = path才能匹配

StaticRouter(后续补充）

3、Switch

这是v4版本中新添加，主要用来做唯一匹配的功能。就是想要在众多路由中只匹配其中一个路由。

二、v4 版本中路由应该如何配置呢？

1.基本配置（这个和v3中基本一致，效果也基本一样）

匹配 <= location eq.( /b => / + /b ) ( / => / )

 <BrowserRouter forceRefresh={!supportsHistory} keyLength={12}>
   <div>
     <Route path="/" component={aContainer} />
     <Route path="/b" component={bContainer} />
   </div>
  </BrowserRouter>

2.含Switch 配置

匹配 <= location eq.( /b => /b ) ( / => / ) 唯一匹配

 <BrowserRouter forceRefresh={!supportsHistory} keyLength={12}>
   <Switch>
       //这里用exact，仅仅是担心location被 path='/'截胡了。
     <Route exact path="/" component={aContainer} />
     <Route path="/b" component={bContainer} />
   </Switch>
  </BrowserRouter>

问题（三个问题）

1.如何设置公共的Component

第一种方式

 <BrowserRouter forceRefresh={!supportsHistory} keyLength={12}>
   <div>
     <Route path="/" component={aContainer} />
     <Route path="/b" component={bContainer} />
   </div>
  </BrowserRouter>

第二种方式(父子嵌套)

 <BrowserRouter forceRefresh={!supportsHistory} keyLength={12}>
   <div >
    <Route path="/" component={aContainer} />
    <Route path="/b" component={Parent} />
    {/* {app()} */}
   </div>
  </BrowserRouter>

const Parent = ({ match }) => (
 <div>
  <Route path={`${match.url}/`} component={bContainer} />
  <Route path={`${match.url}/c`} component={cContainer} />
  <Route path={`${match.url}/d`} component={dContainer} />
 </div>
);

这种情况 bContainer就是是公用的Component

2.如何设置getComponent，按需加载

另一篇文章

3.是否有简化写法

npm install --save react-router-config

第一步配置路由

const routes = [
 { component: bContainer,
  routes: [
   { path: '/',
    exact: true,
    component: bContainer
   },
   { path: '/b/b',
    component: bContainer,
    routes: [
     { path: '/b/b/b',
      component: bContainer
     }
    ]
   }
  ]
 }
]

第二步设置路由

<BrowserRouter forceRefresh={!supportsHistory} keyLength={12}>
   <div >
     {renderRoutes(routes)}
   </div>
 </BrowserRouter>

第三步需要在container的render中去调用方法

 <div>
 1111
 {renderRoutes(this.props.route.routes)}
</div>

这个优势是可以统一配置，劣势是需要在container中统一调用，但是这个抽出来统一实现，问题也不大，并且还可以解决问题一。

这个renderRoutes实际是就是用一层Switch和多个Route来包了一层。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

react,router,v4,React-router,v4,路由

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“React-router v4 路由配置方法小结”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月19日

React-router v4 路由配置方法小结

原生JS+Canvas实现五子棋游戏

用Vue.extend构建消息提示组件的方法实例

评论“React-router v4 路由配置方法小结”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接