迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 >

React 使用 Router 获取当前路由

作者:迹忆客 最近更新:2022/04/30 浏览次数:

使用 useLocation() 钩子通过 React Router 获取当前路由,例如 const location = useLocation() 。 钩子返回当前位置对象。 例如,我们可以将路径名作为 location.pathname 访问。

import React from 'react';
import {Route, Link, Routes, useLocation} from 'react-router-dom';

export default function App() {
  const location = useLocation();

  console.log('hash', location.hash);
  console.log('pathname', location.pathname);
  console.log('search', location.search);

  return (
    <div>
      <div>
        <h2>Current Pathname 👉️ {location.pathname}</h2>
        <h2>Current Search params 👉️ {location.search}</h2>
        <h2>Current Hash 👉️ {location.hash}</h2>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users?page=10">Users</Link>
            </li>
            <li>
              <Link to="/users?page=10#myHash">Users with hash</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/about" element={<About />} />
          <Route path="/" element={<Home />} />
        </Routes>
      </div>
    </div>
  );
}

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

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

react router get current route

我们使用 useLocation 钩子来获取当前位置对象。

可以在位置对象上访问的一些属性是:

  • pathname - 当前路径名,例如 /用户
  • search - 当前查询字符串,例如 ?page=10
  • hash - 当前的哈希值,例如 #example

使用 react 路由器钩子时,请确保将我们的应用程序封装在 index.js 文件中的路由器组件中。

index.js

import {createRoot} from 'react-dom/client';
import App from './App';
import {BrowserRouter as Router} from 'react-router-dom';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

// wrap App in Router
root.render(
  <Router>
    <App />
  </Router>
);

用 Router 组件包装 React 应用程序的最佳位置是在 index.js 文件中,因为这是 React 应用程序的入口点。

一旦你的整个应用被一个 Router 组件包裹,你就可以在组件的任何地方使用来自 react router 包的任何钩子。

如果有动态路由并尝试访问其 ID,请使用 useParams 钩子。

import React from 'react';
import {Route, Link, Routes, useParams} from 'react-router-dom';

function Users() {
  // get ID from url
  const params = useParams();

  console.log(params); // {userId: '12345'}

  return <h2>userId is 👉️ {params.userId}</h2>;
}

export default function App() {
  return (
    <div>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              {/* link to dynamic path */}
              <Link to="/users/12345">Users</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/about" element={<About />} />
          {/* handle dynamic path */}
          <Route path="/users/:userId" element={<Users />} />
          <Route path="/" element={<Home />} />
        </Routes>
      </div>
    </div>
  );
}

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

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

get dynamic route id

useParams 钩子从当前 URL 返回与 <Route path> 匹配的动态参数的键值对对象。

请注意,我们在渲染用户组件的 Route 组件上设置了一个动态路径属性 - <Route path="/users/:userId" element={<Users />} />

当访问 /users/some-id 时,我们可以使用 useParams 钩子来获取 ID。

function Users() {
  // get ID from url
  const params = useParams();

  console.log(params); // 👉️ {userId: '12345'}

  return <h2>userId is 👉️ {params.userId}</h2>;
}

该路由将匹配 /users/ 之后的任何内容,例如 /users/123/users/asdf

除非注明转载,本站文章均为原创或翻译,欢迎转载,转载请以链接形式注明出处

本文地址:

迹忆客

专注技术分享,项目实战分享!

技术宅 乐于分享 7年编程经验
社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

热门文章

教程更新

热门标签

扫码一下
查看教程更方便