react获取当前页面路由

可以使用withRouter高阶组件来获取当前页面的路由信息，具体实现如下：

1.引入withRouter和Route组件：

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

2.使用withRouter包裹组件：

const MyComponent = ({ match, location, history }) => {
// 使用match、location、history获取路由信息
return (
<div>{location.pathname}</div>
);
};

export default withRouter(MyComponent);

3.在Route组件中使用组件：

<Route path="/my-component" component={MyComponent} />

这样就可以在MyComponent中通过location.pathname获取当前页面的路由信息了。

相关问题

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等，可以根据实际需求进行使用。