@React路由之路

在React中学会使用路由

学习最容易给的疑惑是： 我看懂了，可是写不出来。

1. 理解路由组件
2. 如何使用路由
3. 动态路由加载组件

问题

咱们如何向 vue-router 同样可以设置一个路由的配置项的东西，来简化开发流程。 这是可行的吗？

第一步

react-router-dom 包向外面暴露的组件有：

• BrowserRouter
• HashRouter
• Link
• NavLink

其次 依赖于 react-router 包，它向外暴露的包：

• MemoryRouter
• Prompt
• Redirect
• Route
• Router
• StaticRouter
• Switch
• __RouterContext
• generatePath
• matchPath
• useHistroy， // 获取如今的 histroy 对象， hook 方便咱们使用
• useLocation，// 获取如今location的对象， hook 方便咱们使用
• useParams, 使用动态路由的时候，咱们要写参数/cards/:id， hook 方便咱们使用
• useRouteMatch // 获取 route 的匹配对象， hook 方便咱们使用
• withRouter

在新版本中，咱们大量的使用的 hooks 来简化咱们的开发，这项目里面大量的使用了，钩子函数，钩子函数的复用，使得代码变的更加简洁。

React 路由

React 嵌套路由

经过一级路由匹配到组件，组件点击以后是匹配的另外一个组件，这里面是嵌套路由的配置和组件的内容。

这里有一个api: useRouteMatch 来匹配内容当前的 path 和 url

React 路由重定向

咱们经过 React 路由的充电向到其余的路由，经常使用设定不一样的权限使用重定向功能

自定义 Link 组件

在 React 当中一切是组件，因此在React当中，组件是比 React 更加灵活的，大师 React 对 JS 的要求相对就高了的不少，其次还有项目的性能优化。

自定义 Link 就是控制 Link 展现的内容，能够添加css, 来控制样式

阻止过渡

咱们填写表单的时候，可能会遇到表单没哟提交什么以内，而后将想路由跳转，跳转以前作一些提示的话，咱们应该阻止这些过渡行为。

<Prompt
    when={isBlocking}
    message={location =>
        `Are you sure you want to go to ${location.pathname}`
    }
    />
复制代码

404 Not Match

let location = useLocation();
复制代码

跟Vue中同样没有匹配到的时候，咱们 * 来匹配

路由简单的映射

Route 组件

React 中一块儿皆是组件，全部的都是组件

Route 组件就是在路由发生跳转的时候，匹配时的组件，Route 组件的属性：

• render 方法

• props props 属性

• component 渲染组件

• render function 渲染内联组件

• children function 选人孩子组件，props.child 内部的属性，将 Route 组件和 prop.chidlren 合二为一。

• path 路径

• exact 精确的

• strict 严格的

• location 对象

• sensitive 大小写敏感的

// config.js
const config = [
    {
        path: '/',
        exact: true,
        name: '主页'，
        component: Index,
        icon: 'index',
        meta: {
            isAuth: true,
            
        }
    }，
    {
        path: '/login',
        exact: true,
        name: '主页'，
        component: Index,
        icon: 'index',
        meta: {
            isAuth: true,
            
        }
    }
]
复制代码

咱们须要将这个数组映射成，咱们须要的单页面的应用的路由模式，可是不可能手写，因而咱们能够听从这数据结构（设计就是 Route 组件的属性）

import React from 'react'
import { config } from './config';
import { Route } from 'react-router-dom'

// React 函数组件 RenderRoute，return 的是咱们要渲染的函数
export const RenderRoute = () => {
  return config.map((route, index) => 
    <Route path={route.path} exact={route.exact} key={route.path} component={route.component}></Route>
  )
}

复制代码

这是简单的配置文件到组件的映射问题，而后咱们考虑的问题

• 少不了嵌套组件的实现
• 少不了重定向
• 少不了受权管理
• 动态组件的方法
• 路由配置中国须要配合的 icons 和 routes 和 name 一些业务须要的东西。

参考

1. reacttraining.com/react-route…