面试题-React(十八):一文学会 React Router

一、React Router简介

React Router是一个用于管理React应用中导航和路由的库。它允许开发者在单页面应用(SPA)中创建多个页面,每个页面对应一个不同的URL。React Router的主要特性包括:

  • 声明式路由: React Router允许您以声明式的方式定义路由规则,使得路由配置更加直观和易于理解。
  • 嵌套路由: 您可以创建嵌套路由,将不同的组件与不同的URL子路径相关联。
  • 路由参数: 您可以通过路由参数传递数据,以便在不同页面之间共享信息。
  • 导航: React Router提供了Link组件,用于在应用内导航到不同的页面。
  • 路由守卫: 您可以使用路由守卫来控制访问权限,例如需要登录才能访问某些页面。

二、安装和配置React Router

要开始使用React Router,首先需要安装它。您可以使用npm或yarn进行安装:

bash 复制代码
npm install react-router-dom

接下来,您需要在应用中配置React Router。通常,在应用的顶层组件中包装<BrowserRouter><HashRouter>,以便路由可以正常工作。这里以<HashRouter>为例:

jsx 复制代码
import ReactDOM from 'react-dom/client';
import { HashRouter } from 'react-router-dom';
import App from './App';

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

三、创建和配置路由

在React Router中,路由通常由<Route>组件定义。每个<Route>组件表示一个URL模式与相应的组件之间的映射。以下是一个示例:

jsx 复制代码
import React from 'react';
import { Route } from 'react-router-dom';

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function NotFound() {
  return <h1>Not Found</h1>
}

function App() {
  return (
    <div>
       <Routes>
          <Route path='/' element={<Home/>}></Route>
          <Route path='/about' element={<About/>}></Route>
          <Route path="*" element={<NotFound/>}></Route>
       </Routes>
    </div>
  );
}

export default App;

在上面的示例中,<Route>组件用于将URL的根路径("/")映射到Home组件,将"/about"路径映射到About组件。*适用于路径找不到时映射到NotFound组件

四、导航

React Router提供了<Link>组件,用于在应用内进行导航。以下是一个示例:

jsx 复制代码
import { Link } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
    </nav>
  );
}

export default Navigation;

在上面的示例中,<Link>组件用于创建到不同页面的链接。to属性指定目标URL。

五、嵌套路由

在React Router中,如果想要实现嵌套路由,我们可以使用
<Route>组件来包裹内部的<Route>组件。例如:

jsx 复制代码
function App() {
  return (
    <div>
       <Routes>
            <Route path='/home' element={<Home/>}>
              <Route path="/home/list" element={<HomeList/>}></Route>
              <Route path="/home/details" element={<HomeDetails/>}></Route>
            </Route>
            <Route path='/about' element={<About/>}></Route>
            <Route path="*" element={<NotFound/>}></Route>
          </Routes>
    </div>
  );
}

export default App;

六、路由重定向

在React Router中,通常使用<Navigate>组件实现路由的重定向。以下是一个示例:

jsx 复制代码
import { Routes, Route, Navigate } from "react-router-dom"

function App() {
  return (
    <div>
       <Routes>
            <Route path="/" element={<Navigate to="/home" />}></Route>
            <Route path='/home' element={<Home/>}>
              <Route path="/home" element={<Navigate to="/home/list"/>}></Route>
              <Route path="/home/list" element={<HomeList/>}></Route>
              <Route path="/home/details" element={<HomeDetails/>}></Route>
            </Route>
            <Route path='/about' element={<About/>}></Route>
            <Route path="*" element={<NotFound/>}></Route>
          </Routes>
    </div>
  );
}

export default App;

在上面的示例中,<Navigate>组件的to属性指定重定向的URL。

七、路由参数

有时,您需要从URL中获取参数以便在组件中使用。React Router允许您通过match对象来访问这些参数。以下是一个示例:

jsx 复制代码
import React from 'react';
import { Route } from 'react-router-dom';

function UserProfile(props) {
  const { match } = props;
  const { username } = match.params;

  return <h1>Welcome, {username}!</h1>;
}

function App() {
  return (
    <div>
      <Route path="/user/:username" component={UserProfile} />
    </div>
  );
}

export default App;

在上面的示例中,UserProfile组件可以通过match.params访问URL中的username参数。当然,这里只是举例了一个路由传参的方式,还有更多方式可以参考
React Router官网

相关推荐
brief of gali几秒前
记录一个奇怪的前端布局现象
前端
前端拾光者39 分钟前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
Json_181790144801 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆2 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China2 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q2 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge