使用 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

发表评论