React Router简介

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的所有功能，并且又增加了适合在浏览器运行环境下的一些功能

路由参考官网：https://reactrouter.com/en/main

安装react-router-dom

npm install react-router-dom@6.8.1 --save

初步体验

​x
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Route, Routes, Link, Outlet } from 'react-router-dom'

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>
);

function App(props) {
  return (
    <div>
      <Outlet />
    </div>
  )
}

function Home() {
  return <h2>我是首页面</h2>
}

function User(props) {
  return <h2>我是用户页面</h2>
}

实时效果反馈

1. 下面说法错误的是:

A 路由可以保持页面与 URL 间的同步

B react-router-dom不需要安装

答案

1=>B