加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

React-router v4 路由配置方法

发布时间:2020-12-15 06:56:41 所属栏目:百科 来源:网络整理
导读:React-Router v4 一. Switch 、Router 、Route三者的区别 1、Route Route 是建立location 和 ui的最直接联系 2、Router react-router v4 中,Router被拆分成了StaticRouter、MemoryRouter、BrowserRouter、HashRouter、NativeRouter。 MemoryRouter、Browser

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来包了一层。
??

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读