一、导引

使用React路由的目的在于实现SPA（单页面应用），特点是单页面（只有一个html文件）、多组件。

二、使用react-router-dom

注意：这里要区分路由库的版本，我这里的版本是v6

/*src/index.js*/
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";

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

Link标签类似于a标签，to属性表示跳转到哪个组件，名字自定义。
Route标签的作用是注册组件，path属性表示与Link定义的路径相同，element属性表示要显示的组件。
注意：v6版本需要在Route标签外包上Routes标签。

/*RouterDemo/index.jsx*/
import React, { Component } from 'react';
import { Link, Route, Routes } from 'react-router-dom';
import Home from './Home';
import About from './About';

export default class RouterDemo 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">
                            {/* 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="/:name" element={<About />} />
                                    <Route path="/home" element={<Home />} />
                                </Routes>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

/*App.js*/
import React, { Component } from 'react';
import RouterDemo from './components/RouterDemo';

export default class APP extends Component {
  render() {
    return (
      <div id="root">
          <RouterDemo />
      </div>
    );
  }
}

/*About/index.jsx*/
import React, { Component } from 'react';

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

/*Home/indx.jsx*/
import React, { Component } from 'react';

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

三、获取路由中的参数

1、useLocation

useLocation是获取当前路由的信息。
在这里插入图片描述

2、useParams

useParams是获取当前路由中，在Route标签的时候，path属性通过**:key**的方式设置的内容。

/*RouterDemo/index.jsx*/
<Route path="/:name" element={<About />} />

在这里插入图片描述

/*About/index.jsx*/
import React from 'react';
import { useLocation, useParams } from 'react-router-dom';

export default function About() {
    const location = useLocation();
    const param = useParams();
    console.log('useLocation', location)
    console.log('useParams', param)
    return (<h3>我是About的内容-{param.name}-{location.search ? location.search : ''}</h3>);
}

四、使用usenavigate进行路由切换

假设我们在About路由中添加一个按钮，功能为跳转到Home路由

/*About/index.jsx*/
<button onClick={() => { to('/Home') }}>Home</button>

五、嵌套路由

在这里插入图片描述

/*About/index.jsx*/
import React from 'react';
import { useLocation, useParams, useNavigate, Link, Routes, Route } from 'react-router-dom';
import Router2 from './router2';
import Router1 from './router1';

export default function About() {
    const location = useLocation();
    const param = useParams();
    const to = useNavigate();
    console.log('useLocation', location)
    console.log('useParams', param)
    console.log('useNavigate', to)

    return (
        <div>
            <h3>我是About的内容-{param.name}-{location.search ? location.search : ''}</h3>
            <button onClick={() => {
                to('/Home')
            }}>Home</button>
            <hr />
            <Link to='/About'>嵌套路由1</Link>
            <Link to='/About/2'>嵌套路由2</Link>
            <Routes>
                <Route path="" element={<Router1 />}></Route>
                <Route path="2" element={<Router2 />}></Route>
            </Routes>
        </div>);
}
//注意Link和Route中的to和path规范

六、404页面

当地址栏找不到相应页面的时候就会跳出404页面

/*About/index.jsx*/
import React from 'react';
import { useLocation, useParams, useNavigate, Link, Routes, Route } from 'react-router-dom';
import Router2 from './router2';
import Router1 from './router1';
import PageNotFound from '../exception/404';

export default function About() {
    const location = useLocation();
    const param = useParams();
    const to = useNavigate();
    console.log('useLocation', location)
    console.log('useParams', param)
    console.log('useNavigate', to)

    return (
        <div>
            <h3>我是About的内容-{param.name}-{location.search ? location.search : ''}</h3>
            <button onClick={() => {
                to('/Home')
            }}>Home</button>
            <hr />
            <Link to='/About'>嵌套路由1</Link>
            <Link to='/About/2'>嵌套路由2</Link>
            <Routes>
                <Route path="" element={<Router1 />}></Route>
                <Route path="2" element={<Router2 />}></Route>
                <Route path="*" element={<PageNotFound />} />
            </Routes>
        </div>);
}
//注意：404页面的Route中，path='*'表示如果二级路由除了""或者"2"的名字外，就会显示404