react学习（十六）React路由

最新推荐文章于 2024-04-28 17:06:58 发布

原创最新推荐文章于 2024-04-28 17:06:58 发布 · 63 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #学习 #前端 #前端框架 #javascript

本文详细介绍了React单页面应用(SPA)的路由实现原理，包括前端路由的基础-history API的应用，以及通过BrowserRouter和HashRouter实现不同组件之间的切换。通过示例代码展示了如何创建导航链接和注册路由。

1 React路由原理

1.1 单页面应用

传统的网页，由一堆html组成，我们点击其中一个链接，页面在各个html之间来回切换，伴随着整个页面的刷新。

而React单页面应用(SPA)指的是，我们点击链接时，地址栏中的url发生了变化，但是页面并不会整个刷新，只刷新部分页面。React单页面是通过路由实现的，也就是说当点击某个链接时，地址栏中的url发生变化，React路由监控机制监控到这个变化，查询路由表来确定显示哪个组件。

1.2 前端路由的基石-history

下面一个例子，我们演示React是如何做到修改地址栏地址而不引起页面刷新的，进而我们可以猜测到React路由的实现原理。代码中我们使用了 history.js 来操作浏览器的history，这样可以屏蔽原生history API的复杂性

<html>
<body>
    <a href="http://www.baidu.com" onclick="return push('/test1')">push test1</a><br><br>
    <button onclick="push('/test2')">push test2</button><br><br>
    <button onclick="replace('/test3')">replace test3</button><br><br>
    <button onclick="back()">回退</button><br><br>
    <button onclick="forward()">前进</button><br><br>
    <script type="text/javascript" src="https://cdn.bootcss.com/history/4.7.2/history.js"></script>
    <script>
        let history = History.createBrowserHistory()
        function push(path) {
            history.push(path)
            return false
        }
        function replace(path) {
            history.replace(path)
        }
        function back() {
            history.goBack()
        }
        function forward() {
            history.goForward()
        }
        history.listen((location)=>{
            console.log('请求路由路径变化了', location)
        })
    </script>
</body>
</html>

注意下图中地址栏的变化

浏览器中history是一个栈，浏览器当前页面显示的是栈顶的地址。当我们把一个地址push进栈顶时，浏览器显示就会发生变化。React就是采用浏览器的history特性，当地址栏path发生变化时，React监控到这一变化，显示不同的组件。

2 实例

我们写一个实例，左边导航栏有导航菜单，右面主面板。根据导航菜单的不同主面板显示不同的组件。

在这里我们用到了bootstrap.css

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom'
import App from './App';

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

路由器：BrowserRouter，负责监控地址栏path的变化，当path变化时，查找路由表显示相应的组件

App.js

import React, { Component } from 'react';
import {Route, Routes, Link,} from 'react-router-dom'
import About from "./components/About";
import Home from "./components/Home";
import "../public/bootstrap.css"

class App extends Component {
  render() {
    return (
      <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>
          <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 active" 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">
                  {/*  注册路由*/}
                  <Routes><Route path="/about" element={<About/>}/>
                    <Route path="/home" element={<Home/>}/>
                  </Routes>
                </div>
              </div>
            </div>
          </div>
      </div>
    );
  }
}

export default App;

路由链接：Link，来自于react-route-dom。

<Link className="list-group-item" to="/about">About</Link>

注册路由：

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

About.jsx

import React, {Component} from 'react';

class About extends Component {
    render() {
        return (
            <h3>我是About内容</h3>
        );
    }
}

export default About;

Home.jsx

import React, {Component} from 'react';

class Home extends Component {
    render() {
        return (
            <h3>我是Home内容</h3>
        );
    }
}

export default Home;

演示(注意地址栏的变化，和页面是否有刷新)

3 HashRouter

上面我们使用的是BrowserRouter，下面我们使用HashRouter

我们把index.js中的BrowserRouter改为HashRouter

import React from 'react';
import ReactDOM from 'react-dom';
import {HashRouter} from 'react-router-dom'
import App from './App';

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

效果，