react路由
什么是路由
简单的说就是根据不同的地址，web服务器处理不同的业务以及逻辑。
这个文档是本人学习所用 写的不是很详细 勿喷
路由基本信息
安装react-router-dom
yarn add react-router-dom --save
项目地址
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的布局
login.tsx
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>效果一样
