每天学点React - React路由入门持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第26天

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第26天，点击查看活动详情

React路由(5版本）

路由的理解

什么是路由？ 1）一个路由就是一个映射关系（key,value）;

2）key为路径，value可能是 function 或 component;
路由分类 1）后端路由： - 理解：value是function，用来处理客户端提交的请求。 - 注册路由：router.get(path, function(req, res))。 - 工作过程：当node接收到一个请求时，根据请求路径找到匹配的路由，调用路由中的函数来处理请求，返回响应数据。
2）前端路由： - 浏览器端路由，value是component, 用于展示页面内容。 - 注册路由：<Route path="/myPath" component={MyPath}> - 工作过程：当浏览器当path变为/myPath时，当前路由组件就会变为MyPath组件。

react-router-dom的理解

react的一个插件库
专门用来实现一个SPA应用
基于react的项目基本都会用到此库

react-router文档：react-router.docschina.org/

react-router相关API

内置组件
- <BrowserRouter>
- <HashRouter>
- <Router>
- <Redirect>
- <Link>
- <NavLink>
- <Switch>
其它
- history对象
- match对象
- withRouter函数

安装引用

安装react-router-dom5版本

sudo npm add react-router-dom@5

引用

import {} from 'react-router-dom'

案例演示

一般的管理后台之类的，都会有如下的结构，红色区域的展示区以及蓝色区域的导航区，我们要实现的案例即为点击蓝色区域的链接，红色区域显示对应的内容，而浏览器不会做整体刷新操作，实现局部刷新，给用户更好的体验感。

App

import React, { Component } from 'react'
import { BrowserRouter, Link, Route } from 'react-router-dom'
import Home from './components/Home'
import About from './components/About'

export default class App extends Component {
    render() {
        return (
            <div id='root'>
                <div>
                    <div className='row'>
                        <div className='col-xs-offset-2 col-xs-8'>
                            <div className='page-header'>
                                <h2>React Router Demo</h2>
                            </div>
                        </div>
                    </div>

                    <BrowserRouter>
                        <div className='row'>
                            <div className='col-xs-2 col-xs-offset-2'>
                                <div className='list-group'>
                                    {/* 原生html中，靠<a>标签跳转不同的页面 */}
                                    {/* <a className='list-group-item' href='./about.html'>About</a>
                    <a className='list-group-item' href='./home.html'>Home</a> */}

                                    {/* 在React中靠路由链接实现切换组件--定义路由链接 */}
                                    <Link className='list-group-item' to='/about'>About</Link>
                                    <Link className='list-group-item' to='/home'>Home</Link>
                                </div>
                            </div>
                            <div className='col-xs-6'>
                                <div className='panel'>
                                    <div className='panel-body'>
                                        <Route path='/about' component={About}></Route>
                                        <Route path='/home' component={Home}></Route>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </BrowserRouter>
                </div>
            </div>
        )
    }
}

About

import React, { Component } from 'react'

export default class About extends Component {
    render() {
        return (
            <h3>About页面内容展示</h3>
        )
    }
}

Home

import React, { Component } from 'react'

export default class Home extends Component {
    render() {
        return (
            <h3>Home页面内容展示</h3>
        )
    }
}

测试了效果，点击左侧的菜单，右边的展示区会显示不同的内容，同时浏览器还不会整个页面刷新。但是我们路由包裹的范围还是有些局限，仅包含了About和Home两个组件，如果后续新增别的组件，又得调整，因此，我们可以将其提取到index.js的组件入口中。

// 引入React核心库
import React from 'react'
// 引入ReactDOM
import {createRoot} from 'react-dom/client'
// 引入路由
import {BrowserRouter} from 'react-router-dom'
// 引入自定义组件
import App from './App.js'

// 渲染组件到页面
const container = document.getElementById('root')
const root = createRoot(container)
root.render(<BrowserRouter><App /></BrowserRouter>)

每天学点React - React路由入门