React-Router-基本使用

什么是路由

路由维护了 URL 地址和组件的映射关系, 通过这个映射关系, 我们就可以根据不同的 URL 地址，去渲染不同的组件。

React 中使用路由

安装 react-router

代码语言：shell复制

npm install react-router-dom

通过指定监听模式:

BrowserRouter history模式：http://www.it6666.top/home
HashRouter hash模式：http://www.it6666.top/#/home
通过 Link 修改路由 URL 地址
通过 Route 匹配路由地址

BrowserRouter 和 HashRouter 的作用：

指定路由的监听模式 history模式 / hash模式
history 模式：http://www.it6666.top/home
hash：模式：http://www.it6666.top/#/home

Link 的作用：

用于修改 URL 的资源地址

Route 的作用：

用于维护 URL 和组件之间的关系
Route 是一个占用组件, 将来它会根据匹配到的资源地址渲染对应的组件

案例

需求，界面上有两个按钮, 点击不同按钮显示不同组件：

在看如上的这个特性之前首先降低一下 React 的版本，这里博主介绍的不是 React 最新版本的语法，关于 React 后面更新的版本后面在更新，运行如下执行：

代码语言：shell复制

npm install --save react@16.12.0 react-dom@16.12.0

更改 index.js:

代码语言：javascript复制

import ReactDOM from 'react-dom';
import React from 'react';
import App from './App';

ReactDOM.render(<App/>, document.getElementById('root'));

App.js:

代码语言：javascript复制

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

class App extends React.PureComponent {
    render() {
        return (
            <div>
                <HashRouter>
                    <Link to={'/home'}>Home</Link>
                    <Link to={'/about'}>About</Link>

                    <Routes>
                        <Route path="/" element={<Home/>}/>
                        <Route path="home" element={<Home/>}/>
                        <Route path="about" element={<About/>}/>
                    </Routes>
                </HashRouter>
            </div>
        )
    }
}

export default App;

About.js:

代码语言：javascript复制

import React from 'react';

class About extends React.PureComponent {
    render() {
        return (
            <div>About</div>
        )
    }
}

export default About;

Home.js:

代码语言：javascript复制

import React from 'react';

class Home extends React.PureComponent {
    render() {
        return (
            <div>Home</div>
        )
    }
}

export default Home;

在 V5 与 V6 它们之间的写法还是有更改的，具体的更改内容参考：https://www.querythreads.com/error-error-a-route-is-only-ever-to-be-used-as-the-child-of-routes-element/

官网文档地址: https://reactrouter.com/web/guides/quick-start

React 路由注意点

react-router4 之前, 所有路由代码都是统一放到 react-router 中管理的
react-router4 开始, 拆分为了两个包 react-router-dom 和 react-router-native
- react-router-dom 是在浏览器中使用路由
- react-router-native 是在原生应用中使用的路由(IOS, 安卓)
BrowserRouter history 模式使用的是 H5 的特性, 所以兼容性会比 HashRouter hash 模式差一些
在企业开发中如果不需要兼容低级版本浏览器, 建议使用 BrowserRouter
如果需要兼容低级版本浏览器, 那么只能使用 HashRouter
无论是 Link 还是 Route 都只能放到 BrowserRouter 和 HashRouter 中才有效(放在之外就会无效)

Route 注意点^Route注意点

默认情况下 Route 在匹配资源地址时, 是 模糊 匹配
如果必须和资源地址一模一样才匹配, 那么需要添加 exact 属性, 开启 精准 匹配
Route 在匹配路由的时候, 是利用当前资源地址从左至右的和 path 中的地址进行匹配的
只要当前资源地址从左至右完整的包含了 path 中的地址那么就认为匹配成功了

当前资源地址：/home/about

path 中的地址: /home
path 中的地址: /home/about

模糊匹配：

App.js:

代码语言：javascript复制

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

class App extends React.PureComponent {
    render() {
        return (
            <div>
                <BrowserRouter>
                    <Link to={'/home'}>Home</Link>
                    <Link to={'/home/about'}>About</Link>

                    <Route path="/home" component={Home}/>
                    <Route path="/home/about" component={About}/>
                </BrowserRouter>
            </div>
        )
    }
}

export default App;

精准匹配：

App.js:

代码语言：javascript复制

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

class App extends React.PureComponent {
    render() {
        return (
            <div>
                <BrowserRouter>
                    <Link to={'/home'}>Home</Link>
                    <Link to={'/home/about'}>About</Link>

                    <Route exact path="/home" component={Home}/>
                    <Route exact path="/home/about" component={About}/>
                </BrowserRouter>
            </div>
        )
    }
}

export default App;