使用 React Router 获取当前路由

作者

使用 React Router 获取当前路由

Get the current route using React Router

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

应用程序.js
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>;
}

反应路由器获取当前路线

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

您可以在location对象上访问的一些属性是：

  • pathname– 当前路径名，例如/users
  • search– 当前查询字符串，例如?page=10
  • hash– 当前哈希值，例如#example.
如果您需要获取完整的 URL，例如https://google.com，请改用。 window.location.href

使用 React 路由器挂钩时，请确保将您的应用程序包装在文件中的Router
组件中index.js。

索引.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钩子。

应用程序.js
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>;
}

获取动态路由 ID

useParams钩子从当前 URL 返回一个由<Route path>.

请注意，我们在呈现组件path的组件上设置了一个动态属性– 。RouteUsers<Route path="/users/:userId" element={<Users />} />

当访问者导航到 时/users/some-id，我们可以使用useParams钩子来获取 ID。

应用程序.js
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。

–

发表评论