持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第24天，点击查看活动详情

前言

前面学习了路由的基本用法，今天来学习使用路由组件传递数据和NavLink简单使用。这两个路由功能非常常见的功能。
注意：这里使用的是新版V6不是旧版的V5。两个版本差距挺大的。

React数据传递

路由传值主要有三个方式，主流是使用state传递，其他两个方式为query方式和params，按照顺序测试学习一下

1.state传值

	<Link to="/home" state={{ id: 18}}>

接收值： Home/index.js:

import React from "react";
import { useLocation } from 'react-router-dom';

export default function Home() {

    const {state} = useLocation();
    return (
        <div style={{ padding: 20 }}>
        <h2>Home View 接收参数：{state.id}</h2>
        <p>在React中使用React Router v6 的指南</p>
      </div>
    );
  }

效果：

2.query传参

query传参在官方文章中也叫搜索参数，使用了有一个useSearchParams方法获取传递的数据

传递参数： App.js:

<Link to="/home?id=18" >home</Link>

接收参数 Home/index.js:

import React from "react";
import { useSearchParams } from 'react-router-dom';

export default function Home() {
    const [searchParams] = useSearchParams()
    const id =  searchParams.get('id');
    return (
        <div style={{ padding: 20 }}>
        <h2>Home View 接收参数：{id}</h2>
        <p>在React中使用React Router v6 的指南</p>
      </div>
    );
  }

效果：

3.params传参

App.js传递参数:

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

function App() {
	return (
		<div>
			<div >
			<Link to="/" >
					/
				</Link>&nbsp;
				<Link to="/home/18" >
					home
				</Link>&nbsp;
				<Link to="/about" >
					About
				</Link>
			</div>
			<Routes>
				<Route path="/" element={<Home />} />
				<Route path="/home/:id" element={<Home /> } />
				<Route path="/about" element={<About />} />
			</Routes>
		</div>
	);
}

export default App;

接收参数
Home/index.js:

import React from "react";
import { useParams } from 'react-router-dom';

export default function Home() {
    const {id} = useParams()
    return (
        <div style={{ padding: 20 }}>
        <h2>Home View 接收参数：{id}</h2>
        <p>在React中使用React Router v6 的指南</p>
      </div>
    );
  }

效果：

NavLink

NavLink是一个类似Link的组件，NavLink最主要的功能主要是可以给Link添加类名，从而实现修改样式。现在直接来使用NavLink做一个选中高亮的功能。

react-route-dom在6.0版本官方已经不再支持activeClassName，现在只能使用className这一个功能了： App.js

...
import './App.css'
...

function App() {
	return (
		<div>
			<div >
				<Link  to="/" >
					/
				</Link>&nbsp;
				<NavLink className={({ isActive }) => "list-group-item" + (isActive ? " " : "mactive")} to="/home" >
					home
				</NavLink>&nbsp;
				<NavLink className={({ isActive }) => "list-group-item" + (isActive ? " " : "mactive")} to="/about" >
					About
				</NavLink>
			</div>
			<Routes>
				<Route path="/" element={<Home />} />
				<Route path="/home" element={<Home />} />
				<Route path="/about" element={<About />} />
			</Routes>
		</div>
	);
}

配套的App.css:

.list-group-item {
    height: 36px;
    width: 100px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background-color: #999;
    color: #f9f9f9;
    font-weight: bold;
}

.mactive{
    height: 36px;
    width: 100px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background-color: #f9f9f9;
    color: #363636;
    font-weight: bold;
}

实现的效果：

总结

今天学习的路由数据传递和NavLink使用大部分的都是代码。并没有很深奥的知识，都是React Route的语法，多练习就熟练了