react之路由使用、路由守卫、跨域

本文目的：因新公司暂无react相关项目安排，防止自己……对某些技术淡忘，所以记录下react项目部分技术要点，方便日后快速进入状态。

Router路由使用

react-router、react-router-dom、react-router-native

react-router实现了路由的核心功能

react-router-dom对react-router进行了封装，我选择的是react-router-dom

一、实现步骤

安装：npm i react-router-dom

使用Router需要在组件最外层包裹router组件——<BrowerRouter>/<HashRouter>，如：

import React, { Component } from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";
import Nav from "./Nav";

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <Nav />
          <Route path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact/:id" component={Contact} />
           {/*--路由信息将保存在match中传递到子组件的props中--*/}
        </div>
      </Router>
    );
  }
}

export default App;

路由的详细信息将会在保存到match传递到子组件的props中

如果url输入"/about"，home、about都会被渲染，这是因为在默认情况下，所有的路由都会被匹配，为了应对更多的路由匹配路由需求，需要使用一些属性、组件进行规范。

二、路由匹配

1、exact:完全匹配

<Route path="/about" exact component={About} />

2、<Switch>:仅会匹配第一个(部分代码)

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
<Switch>
    <Route path="/about" exact component={About} />
    <Route path="/contact" component={Contact} />
    <Route path="/" component={Home} />
</Switch>

三、路由渲染组件的方式

1、component

2、render渲染

<Route path="/about" render={props=>{
       return <About {...props}></About>
}} />

3、children   无论是否匹配都会渲染，但不匹配的情况是没有match的

<Route path="/contact" children={(props)=>{
       return <contact>{props.match?"存在":"不存在"}</contact>
}} />

最后没有记录传参、跳转，总的来说几个框架大同小异，就不记录了。

路由守卫

这里采用react-router-dom包来实现

步骤：

1、创建routerMap文件，记录需要权限的路由

import FirstPage from './views/firstPage/firstPage'
import SecondPage from './views/secondPage/secondPage'
import ThirdPage from './views/thirdPage/thirdPage'


export const routerMap = [
    {path:'/FirstPage', name:'FirstPage' , component:FirstPage},
    {path:'/SecondPage', name:'SecondPage' , roleId:'101', component:SecondPage},
    {path:'/ThirdPage', name:'ThirdPage' , roleId:'102', component:ThirdPage}
]

2、在路由展开时，判断是否登录、相关的权限，同时设置容错处理界面比如404

export default class app extends Component {
    render() {
        return <Router>
                    <Switch>
                        
                        {
                            routerMap.map((item,index)=>{
                                return item.roleId&&sessionStorage.getItem('roleId')?
                                    JSON.parse(sessionStorage.getItem('roleId')).includes(item.roleId)?
                                        <Route path={item.path}key={index} component={item.component}></Route>:<Route path='/login' key={index} component={login}></Route>
                                            :<Route path='/login' key={index} component={login}></Route>
                            })
                        }
                        <Route key='404' component={NotFoundPage}></Route>

                    </Switch>
                </Router>
    }
}

 

跨域

1、安装依赖包

npm install http-proxy-middleware

2、src目录下创建setupProxy.js，进行配置

const { createProxyMiddleware } = require('http-proxy-middleware')

module.exports = function(app){
    app.use(('/dev-api'),createProxyMiddleware({
        target: '后台地址',
        changeOrigin: true,
        pathRewrite: {
            '^/dev-api': '后台地址'
        }
    }))
}