React-router路由全部使用方法

一、基本用法

react-router安装命令

npm install -S react-router-dom

安装完了依赖关系，在代码编辑器中打开 package.json 文件，你会看到 react-router-dom 库的依赖版本。

“dependencies": {
  // 安装的其余依赖项
 "react-router-dom": "^6.2.1",
},

二、创建第一个路由

要使用React Router库创建第一个路由，在index.js中，添加以下导入语句。

import {BrowserRouter } from 'react-router-dom' //引入react-router

因为所有的路由都需要用同一个BrowserRouter包起来 所以我直接在index.js文件中把App组件给包了起来

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

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

这是从 react-router-dom 库导入的第一个组件。它用于包装不同的路线，它使用HTML5 history API来跟踪React应用程序中的路由历史记录。

为了在下面的演示中创建第一个路由，让我们创建一个名为 Home 的基本函数组件，返回一些JSX。

render() {
        return (
            <div>
                React-router教程
            </div>


        )
    }

再创建另一个名为 About 的函数组件，来进行页面跳转切换只有当浏览器窗口中的URL为about的时候呈现

function About(){
    
    return(
        <div>
            About React-router页面
        </div>
    )
}

然后，为 组件添加注册 Route路由：

App,js文件

 import {Route, Routes } from 'react-router-dom' //引入react-router

<div>
        {/* 注册路由（编写路由链接） */}
    <Routes >
        <Route path="/about" element={<About />} />
        <Route path="/home" element={<Home />}  />
    </Routes>

 </div>

三、添加导航菜单

首先在库中导入Link添加到引用的文件：

import { Link, Route, Routes } from 'react-router-dom' //引入react-router

在HTML中的不同网页之间导航的概念是使用a标签锚点标记跳转页面：

<a href="">Some Link Name</a>

在React应用程序中使用这种方法将导致在每次渲染新视图或页面本身时刷新web页面。为了避免刷新网页，react-router-dom 库提供了 Link 组件，类似于a标签。

import React from 'react'
import { Link, Route, Routes } from 'react-router-dom' //引入react-router
// import Home from '../Home/Home'
import About from '../About/About'
import Home from '../Home/Home';
import Dz from '../Dz/Dz';
function App() {
  return (
    <div className="App">
      <div><h2>欢迎光临</h2></div>
      {/* 路由连接切换组件 */}

      <Link to="/about">About</Link><br />
      <Link to="/home">Home</Link>

      <div>
        {/* 注册路由（编写路由链接） */}
        <Routes >
            <Route path="/about" element={<About />} />
            <Route path="/home" element={<Home />}  />
        </Routes>
      </div>
    </div>
  );
}

export default App;

Link组件中的to属性指向路径后 Router根据Link指向的路径通过path属性 在element中显示对应的组完成组件页面跳转。

四、嵌套路由

举例：在Home组件中再写一个二级路由代码如下：

我可以在Router标签中再写一个Router标签作为子路由：

{/* 注册路由（编写路由链接） */}
 <Routes >
    <Route path="/about" element={<About />} />
    <Route path="/home" element={<Home />}  >
       <Route path="dz" element={<Dz />} />
    </Route>        
 </Routes>

dz就是home组件的子路由

dz.js

import React, { Component } from 'react'

export default class Dz extends Component {
    static propTypes = {

    }

    render() {
        return (
            <div>
                嵌套路由 home的子路由
            </div>
        )
    }
}

随便返回一点jsx内容

写嵌套路由需要在home页面引入Outlet组件 代码如下

import React, { Component } from 'react'
import { Outlet,Link } from 'react-router-dom' //引入react-router
export default class Home extends Component {
    static propTypes = {

    }
    render() {
        return (
            <div>
                React-router教程
                <p>
                <Link to="/home/dz">子路由</Link>
                </p>
                <Outlet></Outlet>
            </div>


        )
    }
}

这就是嵌套路由

五、通过事件跳转路由

首先是在页面中引入react-router-dom中的useNavigate在函数组件中使用

定义一个let navigate = useNavigate()

通过点击事件跳转路由

<input type='button' value='按钮跳转' onClick={()=>{navigate('/home')}} />

全部代码：

import React, { Component } from 'react'
import {useNavigate} from 'react-router-dom'

function About(){
    let navigate = useNavigate()
    return(
        <div>
            About
            <input type='button' value='按钮跳转' onClick={()=>{navigate('/home')}} />
        </div>
    )
}

export default About

这是在about组件中写的一个按钮点击事件跳转到home组件。