web前端全系列 教程
1839个小节阅读:2244.1k
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
React Router 是一个基于 React之上的强大路由库,它可以让你向应用中快速地添加视图和数据流,同时保持页面与 URL 间的同步。
我们的React应用是单页面应用(一般只有一个html文件),路由可以让我们实现页面内容的切换。
react-router
为 React Router 提供核心路由功能,但是你不需要直接安装 react-router
react-router-dom
react-router-dom
是基于react-router的,适用于浏览器端应用,react-router-dom包含react-router的所有功能,并且又增加了适合在浏览器运行环境下的一些功能。
提示: 如果你写 React Native 应用,你应该安装 react-router-native; 当你安装 react-router-dom 或 react-router-native 时,都会将 react-router 作为依赖安装。
这次我们的react-router-dom使用的版本是V6。
安装react-router-dom
npm install react-router-dom
或者 yarn add react-router-dom
初步体验
x//src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { BrowserRouter, Route, Routes, Link, Outlet } from 'react-router-dom'
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<div>
<ul>
<li>
<Link to="/">首页</Link>
</li>
<li>
<Link to="/user">用户页面</Link>
</li>
</ul>
<hr />
<Routes>
<Route path="/" element={<App />}>
<Route index element={<Home />} />
<Route path="user" element={<User />}/>
</Route>
</Routes>
</div>
</BrowserRouter>
</React.StrictMode>
);
// // 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
// reportWebVitals();
function App(props) {
return <>
<h2>App</h2>
<Outlet />
</>
}
function Home() {
return <h2>我是首页面</h2>
}
function User(props) {
return <>
< h2>我是用户页面</h2>
<Outlet />
</>
}
实时效果反馈
1. 下面说法错误的是:
A 路由可以保持页面与 URL 间的同步
B react-router-dom不需要安装
答案
1=>B