什么是路由

简单的说就是根据不同的地址，web服务器处理不同的业务以及逻辑。
这个文档是本人学习所用写的不是很详细勿喷

路由基本信息

安装react-router-dom
yarn add react-router-dom --save

项目地址

https://github.com/long3268671/react-app-ts

react-router-dom 使用示例（这里使用ts 需要安装 @types/react-router-dom）

import React,{ Component } from "react";
import { BrowserRouter,Route,Switch } from "react-router-dom";
import routers from "./router/index";
class App extends Component<any,any>{
  render(): React.ReactNode {
    return (
        <BrowserRouter>
            {
                routers.map(router=>{
                    return (
                        <Route
                            path={router.path}
                            component = { router.component }
                        ></Route>
                    )
                })
            }
        </BrowserRouter>
    )
  }
}
export default App

router/index.tsx 代码

import Admin from "../pages/admin";
import Home from "../pages/home";
import User from "../pages/user";
import UserTwo from "../pages/usertow";

import Demo1 from "../pages/routerDemo/demo1";
import Demo2 from "../pages/routerDemo/demo2";
import Demo3 from "../pages/routerDemo/demo3";
interface router {
    path:string,
    component:any,
    children?:Array<router>
}

const routers:Array<router> = [
    {
        path:'/',
        component:Admin,
        children:[
            {
                path:'/demo1',
                component:Demo1
            },
            {
                path:'/demo2',
                component:Demo2
            },
            {
                path:'/demo3',
                component:Demo3
            }
        ]
    },
    {
        path:'/home',
        component:Home
    },
    {
        path:'/user',
        component:User
    },
    {
        path:'/:userId',
        component:UserTwo
    }
]
export default routers

地址栏输入地址 /user 预计会匹配到 User 模块
实际渲染了Admin User UserTwo 这三个模块
原因在于react 的路由设计就是这样的
设计允许我们通过<Route>s以多种方式去构建我们的应用

如果我们现在只想渲染一个 /User 就只渲染User模块
我们加入exact 字段
exact 是精准匹配
我们比较懒就全加上exact 字段所有的路由都严格匹配
请求地址/home
结果只加载了Home模块试验成功
然后输入/user
结果加载了User模块和 UserTwo 模块也就是说 /user 跟/:userId 区分不开

再次找寻解决方案
再加入Switch

  <BrowserRouter>
            <Switch>
            {
                routers.map(router=>{
                    return (
                        <Route
                            exact
                            path={router.path}
                            component = { router.component }
                        ></Route>
                    )
                })
            }
            </Switch>
        </BrowserRouter>

路由加上Switch 按照官网上说
switch只会渲染匹配到的第一个子元素
然后请求/user 只请求到了User模块问题完美解决
由此我们看出
switch只会渲染匹配到的第一个子元素不加Switch会一次渲染所有匹配到的
exact会精确匹配
switch 与 exact 需要配合使用

路由传参与接收

方式1 通过params

<Route path='/:userId' component={User}></Route>

跳转路由

this.props.history.push('/1234')

接收

this.props.match.params.userId

特点：刷新页面数据不会丢失，但是只能传字符串

方式2 通过query

跳转路由

 this.props.history.push({ pathname: '/home' , query : { id: '6666' }})

接收参数

this.props.location.query.id

方式3 通过state

跳转路由

 this.props.history.push({ pathname: '/home' , state: { id: '6666' }})

接收参数

this.props.location.state.id

通过params传参页面刷新数据不会丢失 query与state传参刷新页面数据会丢失

嵌套路由

个人感觉这个是路由模块比较难的所以这块着重说说
目标：实现一个后台管理的路由
首先创建一个home/home.tsx页面一个login/login.tsx页面
home.tsx

import { Layout, Menu } from 'antd';
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    UserOutlined,
    VideoCameraOutlined,
    UploadOutlined,
} from '@ant-design/icons';
import React from "react";
import './home.scss'

const { Header, Sider, Content } = Layout;

class Home extends React.Component<any,any> {
    state = {
        collapsed: false,
    };

    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };

    render() {
        return (
            <Layout className='Body'>
                <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
                    <div className="logo" />
                    <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
                        <Menu.Item key="1" icon={<UserOutlined />}>
                            nav 1
                        </Menu.Item>
                        <Menu.Item key="2" icon={<VideoCameraOutlined />}>
                            nav 2
                        </Menu.Item>
                        <Menu.Item key="3" icon={<UploadOutlined />}>
                            nav 3
                        </Menu.Item>
                    </Menu>
                </Sider>
                <Layout className="site-layout">
                    <Header className="site-layout-background" style={{ padding: 0 }}>
                        {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                            className: 'trigger',
                            onClick: this.toggle,
                        })}
                    </Header>
                    <Content
                        className="site-layout-background"
                        style={{
                            margin: '24px 16px',
                            padding: 24,
                            minHeight: 280,
                        }}
                    >
                        { this.props.children }
                    </Content>
                </Layout>
            </Layout>
        );
    }
}
export default Home

这个是我抄Ant Design的布局

import React,{ Component } from "react";
import { Button }  from 'antd'
class Login extends Component<any, any>{
    goHome(){
        this.props.history.push('/home')
    }
    render(): React.ReactNode {
        return (
            <div>
                这是登录页
                <Button type='primary' onClick={this.goHome.bind(this)}>跳转首页</Button>
            </div>
        )
    }
}
export default Login

修改路由router/index.ts

import Login from "../pages/login/Login";
import Home from "../pages/home/home";
import User from "../pages/user";
import UserTwo from "../pages/usertow";

import Demo1 from "../pages/routerDemo/demo1";
import Demo2 from "../pages/routerDemo/demo2";
import Demo3 from "../pages/routerDemo/demo3";
interface router {
    path:string,
    component:any,
    exact?:boolean,
    children?:Array<router>
}

const routers:Array<router> = [
    {
        path:'/',
        exact:true,
        component:Login
    },
    {
        path:'/home',
        component:Home,
        children:[
            {
                path:'/',
                component:Demo1
            },
            {
                path:'/home/demo2',
                component:Demo2
            },
            {
                path:'/home/demo3',
                component:Demo3
            }
        ]
    },
    {
        path:'/home',
        component:Home
    },
    {
        path:'/user',
        component:User
    },
    {
        path:'/user/:userId',
        component:UserTwo
    }
]
export default routers

可以看到首页是登陆页面然后是/home页面下面有三个子路由
App.tsx

import React,{ Component } from "react";
import { BrowserRouter,Route,Switch } from "react-router-dom";
import './App.css'
import routers from "./router/index";
class App extends Component<any,any>{
  render(): React.ReactNode {
    return (
        <BrowserRouter>
            <Switch>
            {
                routers.map((router,index)=>{
                    return (
                        <Route
                            exact={ router.exact }
                            key={index}
                            path={router.path}
                            render={ (props)=>{
                                return (
                                   <div>
                                       <router.component { ...props }>
                                           {
                                               router.children?.map((item,itemIndex)=>{
                                                   return (
                                                       <Route
                                                           exact={ item.exact }
                                                           key={itemIndex}
                                                           path={item.path}
                                                           component = { item.component }
                                                       />
                                                   )
                                               })
                                           }
                                       </router.component>
                                   </div>
                                )
                            } }
                        />
                    )
                })
            }
            </Switch>
        </BrowserRouter>
    )
  }
}
export default App

这个页面是最重要的引入路由文件routers并循环这里有三种方式

component：

指定只有当位置匹配时才会渲染的 React 组件，该组件会接收 route props 作为属性
当你使用 component（而不是 render 或 children）时，Router 将根据指定的组件，使用 React.createElement 创建一个新的 React 元素。这意味着，如果你向 component 提供一个内联函数，那么每次渲染都会创建一个新组件。这将导致现有组件的卸载和新组件的安装，而不是仅仅更新现有组件。当使用内联函数进行内联渲染时，请使用 render 或 children（见下文）。

render:func

使用 render 可以方便地进行内联渲染和包装，而无需进行上文解释的不必要的组件重装。
你可以传入一个函数，以在位置匹配时调用，而不是使用 component 创建一个新的 React 元素。render 渲染方式接收所有与 component 方式相同的 route props。
children:

警告：<Route component> 优先于 <Route render>，因此不要在同一个 <Route> 中同时使用两者。

children: func

有时候不论 path 是否匹配位置，你都想渲染一些内容。在这种情况下，你可以使用 children 属性。除了不论是否匹配它都会被调用以外，它的工作原理与 render 完全一样。
children 渲染方式接收所有与 component 和 render 方式相同的 route props，除非路由与 URL 不匹配，不匹配时 match 为 null。这允许你可以根据路由是否匹配动态地调整用户界面。如下所示，如果路由匹配，我们将添加一个激活类：
简单的说 component 权限> render>children
咱们使用的是render render后面跟一个函数可以获取到参数props
注意需要把props绑定到后面的组件上面

render={ (props)=>{
                                return (
                                   <div>
                                       <router.component { ...props }> //这里要把props绑定上

然后循环路由的子组件

   <router.component { ...props }>
                                           {
                                               router.children?.map((item,itemIndex)=>{
                                                   return (
                                                       <Route
                                                           exact={ item.exact }
                                                           key={itemIndex}
                                                           path={item.path}
                                                           component = { item.component }
                                                       />
                                                   )
                                               })
                                           }
                                       </router.component>

这里还可以用render传参的方式到父页面去渲染
最后我们到父页面在需要渲染子路由的地方添加
{ this.props.children }
这个就可以子路由渲染到这里跟vue的<router-view></router-view>效果一样

react路由

react路由

什么是路由

路由基本信息

路由传参与接收

方式1 通过params

方式2 通过query

方式3 通过state

嵌套路由

component：

render:func

children: func