React-Router路由笔记

React-Router路由

1.安装路由

npm install react-router-dom

2. 组件基本使用

下面是使用一个简单的案例来开始组件的学习。

首先导入react-router-dom.解构出自己要用的组件

index.js中，要引入一个路由器Router，然后后面的<Link/>,<Route/>组件才能使用

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter>
      <App/>
    </BrowserRouter>
);

在App.js中，使用自己的组件Router.js

import Router from "./components/router/Router";
function App() {
  return (
    <>
      <Router></Router>
    </>
  );
}

export default App;

在Router.js组件中，去实现简单案例

• 这里主要是用<Link to="/path"/>去定义路由的映射关系，实现路由切换
• <Route path="/path" element={<Component/>}/>注册组件

import React, { Component } from 'react'
import { Link,Route,Routes } from 'react-router-dom'
import "./router.css"

export default class Router extends Component {
  render() {
    return (
        <div className='container'>
            <div className='header'>React Router</div>
            <ul className='nav-bar'>
                {/* 映射关系 */}
                <li><Link to="/">Default</Link></li>
                <li><Link to="/home">Home</Link></li>
                <li><Link to="/about">About</Link></li>
            </ul>
            <div className='content'>
                {/* 注册组件 */}
                <Routes>
                    <Route path='/home' element={<div>Home Component</div>}/>
                    <Route path='/about' element={<div>About Component</div>}/>
                </Routes>
            </div>
        </div>
    )
  }
}

router.css代码

.container {
    width: 600px;
    margin: 0 auto;
}

.container .header {
    width: 100%;
    background: #000000;
    color: white;
    text-align: left;
}

.container .nav-bar {
    width: 20%;
    background: #ddd;
    float: left;
    margin: 0;
    padding: 0;
}

.container ul>li {
    list-style: none;
    text-align: left;
}

.container .content {
    width: 80%;
    float: right;
    background: #fff;
}

最后就是效果，成功使用上react路由

3.路由组件和一般组件

• 从语法上面来看，路由组件是被路由定义的组件，使用时一般会和react-router-dom使用，一般组件直接在结构中使用
• 从存放的位置来看，路由组件一般存放在pages文件夹下面，而一般组件存放在components文件夹下

4.NavLink

可以用来高亮显示已被选择的路由组件

将上面的代码进行修改

使用<NavLink className={({isActive})=>isActive?"active":""} to="path" />就可以去实现路由点击后实现一个激活的效果

5.属性传递

这里演示一个案例，封装一个自己的，参数传递到props，组件里面进行渲染

Router.js

MyNavLink.jsx

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

export default class MyNavLink extends Component {
  render() {
    console.log(this.props);
    const {to,children} = this.props
    return (
      <>
        {/* 写法一： */}
        <NavLink {...this.props}>{this.props.children}</NavLink>
        {/* 写法二 */}
        <NavLink to={to} >{children}</NavLink>
      </>
    )
  }
}

浏览器效果是一样的。

6.Routes的使用

当我们需要

7.路由模糊匹配与严格匹配

旧版本之前，默认是模糊匹配，但是新版本移除了

⚠️:但是如果<Link to="a/about/b">，匹配时就会拆分成a about b，如果第一个不匹配，那么就找不到组件了

如果需要开启精准匹配，<Link exact={true} to="">，可简写<Link exact to="path"/>

8.Redirect的使用

如果想默认加载指定的路由组件，那就要使用Redirect，V6版本后将Redirect移除了，跟改为

<Route path="*" element={<Navigate to="home" />}>

9.嵌套路由

新版本：

<Route path='/home' element={<Home/>}>
    <Route path='news' element={<News/>}></Route>  <!--子路由的路径要用相对路径-->
    <Route path='message' element={<Message/>}></Route>
	<!--默认子路由组件-->
    <Route path='*' element={<Navigate to={<News/>}/>}></Route>
</Route>

在子路由组件要显示的地方使用<Outlet/>

Router.jsx中

Home.jsx中

News.jsx

import React, { Component } from 'react'

export default class News extends Component {
  render() {
    return (
      <div>
            <ul>
                <li>News 1</li>
                <li>News 2</li>
                <li>News 3</li>
                <li>News 4</li>
                <li>News 5</li>
            </ul>
      </div>
    )
  }
}

Message.js

import React, { Component } from 'react'

export default class Message extends Component {
  render() {
    return (
      <div>
        <ul>
            <li>Lorem, ipsum.</li>
            <li>Lorem ipsum dolor sit.</li>
            <li>Lorem ipsum dolor sit.</li>
            <li>Lorem ipsum dolor sit.</li>
            <li>Lorem ipsum dolor sit.</li>
        </ul>
      </div>
    )
  }
}

效果，点击home页面一开始展示News组件里面的信息。

10.路由参数

params：路径参数传递

v5写法：

//声明路由
<Link to={`url/${params1}/${params2}`}></Link>
//组测路由
<Route path="url/:params1/:params2" component={组件名}></Route>
//路由组件中接收参数
const {params1,params2} = this.props.match

V6写法

//声明路由
<Link to={`url/${params1}/${params2}`}></Link>
//组测路由
<Route path="url/:params1/:params2" element={<组件名/>}></Route>
//路由组件中接收参数
import {useParams} from 'react-router-dom'
const params = useParams()
const {params1,params2} = params

search：路径参数传递，key-value形式
v5写法：

//声明路由
<Link to={`url?key1=${value1}&key2=${value2}`}></Link>
//组测路由
<Route path="url" component={组件名}></Route>
//路由组件中接收参数
import qs from "querystring"
const {search} = this.props.location //search->?key1=value1&key2=value2
const {key1,key2} = qs.parse(search.slice(1))

V6写法

//声明路由
<Link to={`url?key1=${value1}&key2=${value2}`}></Link>
//组测路由
<Route path="url" element={<组件名/>}></Route>
//路由组件中接收参数
import {useSearchParams} from 'react-router-dom'
const [params] = useSearchParams()
const id = params.get("id")
const title = params.get("title")

state参数
v5写法：

//声明路由
<Link to={{pathname="url",state:{key1:value1,key2:value2}}></Link>
//组测路由
<Route path="url" component={组件名}></Route>
//路由组件中接收参数
const {key1,key2} = this.props.location.state

V6写法

//声明路由
<Link to={url} state:{key1:value1,key2:value2}></Link>
//组测路由
<Route path="url" element={<组件名/>}></Route>
//路由组件中接收参数
import {useLocation} from 'react-router-dom'
const location = useLocation()
const {id,title} = location.state

11.push和replace

push：栈顶添加一条记录

replace：替换栈顶记录

12.BrowserRouter和HashRouter