React Router(用法介绍)

React Router 是一个用于在 React 应用中处理路由的库。它允许你定义应用程序中的多个页面,并在 URL 改变时显示不同的内容。

要使用 React Router,你需要首先安装它:

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

然后,在你的应用中引入所需的组件和函数:

jsx 复制代码
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useParams,
  useRouteMatch,
  useHistory,
  useLocation,
  Redirect,
  Prompt
} from 'react-router-dom';

接下来,你可以定义你的路由。下面是一个简单的例子:

jsx 复制代码
function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users/:id">
            <User />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function User() {
  let { id } = useParams();
  return <h2>User: {id}</h2>;
}

在这个例子中:

  • 我们创建了一个 Router 组件来包裹我们的整个应用。
  • 在导航栏中,我们使用 Link 组件来创建链接到不同页面的按钮。
  • 使用 Switch 组件来渲染与当前 URL 匹配的第一个子 Route 组件。
  • 对于每个 Route 组件,我们指定了一个路径(path)和一个呈现该路径内容的组件。
  • 当访问 /users/:id 路径时,我们可以使用 useParams 钩子从 URL 中获取参数值。

这只是 React Router 的基本用法,实际上它还提供了许多其他功能,如嵌套路由、动态路由匹配等。

嵌套路由

你可以使用 Route 组件的 children 属性来创建嵌套路由。例如:

jsx 复制代码
function Users() {
  return (
    <div>
      <h1>Users</h1>
      <Switch>
        <Route exact path="/users">
          <AllUsers />
        </Route>
        <Route path="/users/:id">
          <SingleUser />
        </Route>
      </Switch>
    </div>
  );
}

在这里,当你访问 /users 时,将显示所有用户列表;当访问 /users/:id 时,将显示单个用户的信息。

动态路由匹配

React Router 允许你在路由路径中使用动态参数。这些参数以冒号 (:) 开头,表示它们可以接受任何字符串。例如:

jsx 复制代码
<Route path="/users/:id" component={UserProfile} />

在这个例子中,:id 是一个动态参数。当访问 /users/42/users/bob 时,都会被匹配并传递给 UserProfile 组件。

路由钩子

React Router 提供了一系列有用的钩子,可以帮助你在组件内部处理路由相关的操作。例如:

  • useParams():从 URL 中提取参数值。
  • useRouteMatch()
相关推荐
10年前端老司机5 分钟前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
夏晚星6 分钟前
vue实现微信聊天emoji表情
前端·javascript
極光未晚8 分钟前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript
Rrvive10 分钟前
原型与原型链到底是什么?
javascript
安替-AnTi1 小时前
基于 React 和 TypeScript 搭建的机器学米其林餐厅数据分析项目
react.js·typescript·数据分析·毕设·米其林
極光未晚1 小时前
JavaScript BOM 对象:浏览器的隐形控制塔
前端·javascript·源码
天涯学馆1 小时前
网站秒变 App!手把手教你搞定 PWA
前端·javascript·面试
用户9272472502191 小时前
PHP + CSS + JS 数据采集与展示系统
javascript
小样还想跑2 小时前
axios无感刷新token
前端·javascript·vue.js
字节跳跃者2 小时前
为什么Java已经不推荐使用Stack了?
javascript·后端