WangShuXian6
commented
3 years ago <BrowserRouter>
使用 React Router 的必要接口
import React from 'react';
import ReactDOM from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
<Router>
<App />
</Router>,
rootElement
);这意味着应用程序组件及其子组件现在可以访问路由器 API。
<Routes>和<Route>
Routes
Routes是一个新元素，是对之前Switch组件的升级。
功能
相对路由 链接 自动路由排序
Route
Route 有两个主要的 props
path 是 URL 路径，
element 是当前 URL 匹配路径时渲染的组件。
example
<Routes>
<Route path="/" element={<Home />} />
<Route path="/menu" element={<Menu />} />
<Route path="/about" element={<About />}
</Routes><Link>和<NavLink>
<Link>
为了避免 a 标签导致的网页刷新,React Router 提供了一个Link元素
Link是一个元素，允许用户通过单击或点击它来导航到另一个页面。
props
to，应该导航到的路径
example
import React from 'react';
import { Link } from 'react-router-dom';
export function Navbar() {
return (
<nav>
<Link to="/home"> Home </Link>
<Link to="/about"> About </Link>
</nav>
)
}<NavLink>
Link和NavLink非常相似 唯一的区别是Navlink知道它是否是active。 当您想对活动链接应用样式时，这很有用。
example
import React from 'react';
import { NavLink } from 'react-router-dom';
export function Navbar() {
return (
<nav>
<NavLink to="/home" activeStyle={{textDecoration:"underline" , color:"red"}}> Home </Link>
<NavLink to="/about" activeStyle={{textDecoration:"underline" , color:"red"}}> About </Link>
</nav>
)
}useNavigate hook
以编程方式导航。 这在需要进行命令式导航时非常有用，例如在用户提交表单或单击按钮之后。
example
import React from 'react';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
function App() {
let navigate = useNavigate();
let [error, setError] = React.useState(null);
async function handleSubmit(event) {
event.preventDefault();
let result = await submitForm(event.target);
if (result.error) {
setError(result.error);
} else {
navigate('success');
}
}
return (
<form onSubmit={handleSubmit}>
// ...
</form>
);
}useParams hook
用于访问 URL 参数。
在嵌套路由中使用时，它返回 URL 中所有参数的对象
example
电子商务应用程序中的个人产品页面
<Route path="/products/:id" element={<ProductPage />} />
import React from 'react';
import { useParams } from 'react-router-dom';
import { products } from './data/products';
export function ProductPage() {
const { id } = useParams()
const product = products.find(el => el.id === id)
return (
<li key={product.id}>
<h3>{product.name}</h3>
<p>{product.description}</p>
<p>{product.price}</p>
</li>
);
}
React Router v6
官方文档 [最新版本文档，之后会更新为更高版本]
安装 Installation
基本安装 Basic Installation
Create React App
ReactDOM.render(
Welcome to React Router!
Welcome to the homepage!
You can do this, I believe in you.
Who are we?
That feels like an existential question, don't you think?
Welcome to React Router!
Welcome to the homepage!
You can do this, I believe in you.
Who are we?
That feels like an existential question, don't you think?
Hello, React Router!