react获取当前路由

可以使用 `react-router-dom` 中的 `useLocation` 钩子来获取当前的路由信息。示例代码如下：

import { useLocation } from 'react-router-dom';

function MyComponent() {
  const location = useLocation();

  console.log(location.pathname); // 当前路由路径

  return (
    <div>
      // ...
    </div>
  );
}

其中，`location.pathname` 表示当前路由的路径。还有其他的一些属性，比如 `location.search` 表示当前路由的查询参数，`location.hash` 表示当前路由的哈希值等。你可以根据自己的需要来使用它们。

相关问题

react 获取当前路由

在 React 中，可以通过 `useLocation` 和 `useHistory` 钩子来获取当前路由信息。

使用 `useLocation` 钩子可以获取当前路径和查询参数等信息。例如：

import { useLocation } from 'react-router-dom';

function MyComponent() {
  const location = useLocation();
  const { pathname, search } = location;
  console.log(pathname); // 当前路径
  console.log(search); // 查询参数
  return (
    // ...
  );
}

使用 `useHistory` 钩子可以获取路由的历史记录，可以用来进行前进、后退等操作。例如：

import { useHistory } from 'react-router-dom';

function MyComponent() {
  const history = useHistory();
  function handleClick() {
    history.push('/other-page'); // 跳转到另外一个页面
  }
  return (
    <button onClick={handleClick}>跳转到其他页面</button>
  );
}

需要注意的是，在使用这些钩子之前，需要先使用 `BrowserRouter` 或 `HashRouter` 等路由组件进行包裹。例如：

import { BrowserRouter as Router, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Route path="/" component={MyComponent} />
    </Router>
  );
}

react获取当前路由路径

React获取当前路由路径需要借助于React-Router库，React-Router是一个常用的React路由库，用于管理应用程序的路由。

首先需要在项目中安装React-Router库，安装命令为：

npm install react-router-dom --save

然后在App.js文件中引入React-Router库，用BrowserRouter包裹整个应用，定义路由，并将其渲染到页面中。

下面是一个示例代码：

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <div>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </div>
    </BrowserRouter>
  );
}

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

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

export default App;

在上面的代码中，定义了两个路由，一个是'/'路由，对应的是Home组件，另一个是'/about'路由，对应的是About组件。

现在就可以通过React-Router提供的withRouter高阶组件获取当前的路由路径。

import React from 'react';
import { withRouter } from 'react-router-dom';

function CurrentPath(props) {
  return <div>当前路径: {props.location.pathname}</div>;
}

export default withRouter(CurrentPath);

在上面的代码中，通过withRouter将CurrentPath组件包裹起来，将当前路由路径作为props传递给组件，然后在组件中渲染出当前路径即可。

React-Router库还提供了其他路由相关的API，如Link、Redirect、Switch等，可以根据实际需求进行使用。