什么是路由

簡單的說就是根據(jù)不同的地址竭钝，web服務(wù)器處理不同的業(yè)務(wù)以及邏輯。
這個文檔是本人學(xué)習(xí)所用寫的不是很詳細(xì) 勿噴

路由基本信息

安裝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 預(yù)計會匹配到 User 模塊
實際渲染了Admin User UserTwo 這三個模塊
原因在于react 的路由設(shè)計就是這樣的
設(shè)計允許我們通過<Route>s以多種方式去構(gòu)建我們的應(yīng)用

如果我們現(xiàn)在只想渲染一個 /User 就只渲染User模塊
我們加入exact 字段
exact 是精準(zhǔn)匹配
我們比較懶就全加上exact 字段所有的路由都嚴(yán)格匹配
請求地址/home
結(jié)果只加載了Home模塊試驗成功
然后輸入/user
結(jié)果加載了User模塊和 UserTwo 模塊也就是說 /user 跟/:userId 區(qū)分不開

再次找尋解決方案
再加入Switch

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

路由加上Switch 按照官網(wǎng)上說
switch只會渲染匹配到的第一個子元素
然后請求/user 只請求到了User模塊問題完美解決
由此我們看出
switch只會渲染匹配到的第一個子元素不加Switch會一次渲染所有匹配到的
exact會精確匹配
switch 與 exact 需要配合使用

路由傳參與接收

方式1 通過params

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

跳轉(zhuǎn)路由

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

接收

this.props.match.params.userId

特點：刷新頁面數(shù)據(jù)不會丟失何鸡，但是只能傳字符串

方式2 通過query

跳轉(zhuǎn)路由

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

接收參數(shù)

this.props.location.query.id

方式3 通過state

跳轉(zhuǎn)路由

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

接收參數(shù)

this.props.location.state.id

通過params傳參頁面刷新數(shù)據(jù)不會丟失 query與state傳參刷新頁面數(shù)據(jù)會丟失

嵌套路由

個人感覺這個是路由模塊比較難的所以這塊著重說說
目標(biāo)：實現(xiàn)一個后臺管理的路由
首先創(chuàng)建一個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)}>跳轉(zhuǎn)首頁</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并循環(huán) 這里有三種方式

component：

指定只有當(dāng)位置匹配時才會渲染的 React 組件，該組件會接收 route props 作為屬性
當(dāng)你使用 component（而不是 render 或 children）時牛欢，Router 將根據(jù)指定的組件骡男，使用 React.createElement 創(chuàng)建一個新的 React 元素。這意味著氢惋，如果你向 component 提供一個內(nèi)聯(lián)函數(shù)洞翩，那么每次渲染都會創(chuàng)建一個新組件。這將導(dǎo)致現(xiàn)有組件的卸載和新組件的安裝焰望，而不是僅僅更新現(xiàn)有組件骚亿。當(dāng)使用內(nèi)聯(lián)函數(shù)進(jìn)行內(nèi)聯(lián)渲染時，請使用 render 或 children（見下文）熊赖。

render:func

使用 render 可以方便地進(jìn)行內(nèi)聯(lián)渲染和包裝来屠，而無需進(jìn)行上文解釋的不必要的組件重裝。
你可以傳入一個函數(shù)震鹉，以在位置匹配時調(diào)用俱笛，而不是使用 component 創(chuàng)建一個新的 React 元素。render 渲染方式接收所有與 component 方式相同的 route props传趾。
children:

警告：<Route component> 優(yōu)先于 <Route render>迎膜，因此不要在同一個 <Route> 中同時使用兩者。

children: func

有時候不論 path 是否匹配位置浆兰，你都想渲染一些內(nèi)容磕仅。在這種情況下，你可以使用 children 屬性簸呈。除了不論是否匹配它都會被調(diào)用以外榕订，它的工作原理與 render 完全一樣。
children 渲染方式接收所有與 component 和 render 方式相同的 route props蜕便，除非路由與 URL 不匹配劫恒，不匹配時 match 為 null。這允許你可以根據(jù)路由是否匹配動態(tài)地調(diào)整用戶界面轿腺。如下所示两嘴，如果路由匹配，我們將添加一個激活類：
簡單的說 component 權(quán)限> render>children
咱們使用的是render render后面跟一個函數(shù) 可以獲取到參數(shù)props
注意需要把props綁定到后面的組件上面

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

然后循環(huán)路由的子組件

   <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