在 React 中获取当前的 URL 和路径名

作者

在 React 中获取当前 URL 和路径名

Get the current URL and Pathname in React

在 React 中使用该window对象获取当前 URL，例如
window.location.href返回包含整个 URL 的字符串。如果您需要访问路径，请使用window.location.pathname. 该pathname属性返回一个字符串，其中包含该位置的 URL 路径。

应用程序.js
import React from 'react';
import {Route, Link, Routes, useLocation} from 'react-router-dom';

export default function App() {
  // 👇️ WITHOUT React router
  console.log('current URL 👉️', window.location.href);
  console.log('current Pathname 👉️', window.location.pathname);

  // 👇️ with React router
  const location = useLocation();
  console.log('hash', location.hash);
  console.log('pathname', location.pathname);
  console.log('search', location.search);

  return (
    <div>
      <div>
        <h2>Current URL 👉️ {window.location.href}</h2>
        <h2>Current Pathname 👉️ {window.location.pathname}</h2>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</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>;
}

获取当前 url 和路径名

我们可以在window.location
对象上获取完整的当前 URL 和路径名
。

应用程序.js
// 👇️ without React router
console.log('current URL 👉️', window.location.href);
console.log('current Pathname 👉️', window.location.pathname);

反应获取当前 url 路径名

location.href
属性返回一个包含整个 URL 的字符串并允许更新
href。

location.pathname属性返回一个字符串，其中包含该

位置的 URL 路径，如果没有路径，则该字符串为空字符串。

如果你使用 React 路由器，你可以通过useLocation钩子访问当前位置对象
。

应用程序.js
import React from 'react';
import {Route, Link, Routes, useLocation} from 'react-router-dom';

export default function App() {
  // 👇️ with React router
  const location = useLocation();

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

  return (
    <div>
      <div>
        <h2>Current URL 👉️ {window.location.href}</h2>
        <h2>Current Pathname 👉️ {window.location.pathname}</h2>

        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</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>;
}

如果您使用这种方法，请确保将您的应用程序包装在文件中的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 包中的任何钩子。

–

发表评论