React获取当前路由详解

一、React获取当前路由信息

React是一个非常流行的JavaScript库，可以用于构建单页面应用程序。对于任何单页面应用程序，了解当前路由的信息是很重要的。在React中获取当前路由信息可以使用React Router库。React Router是一个强大的库，可以帮助我们在React应用程序中实现路由管理。获取当前路由信息需要完成以下几个步骤：

1、安装React Router库。首先需要安装React Router库，可以在控制台输入以下命令进行安装：

npm install react-router-dom

2、引入React Router库。安装完毕后，需要在应用程序中引入React Router库，可以在index.js文件中添加以下代码：

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

3、使用React Router的withRouter函数。最后，在要使用路由信息的组件中使用React Router的withRouter函数即可获取当前路由信息。下面是示例代码：

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

class MyComponent extends React.Component {
  render () {
    const { pathname } = this.props.location;
    return (
      <div>
        <h1>当前路由：{pathname}</h1>
      </div>
    )
  }
}

export default withRouter(MyComponent);

通过withRouter函数，我们可以将当前路由信息作为props传递给组件，并且可以在组件中直接使用props.location获取当前路由信息。这样就可以方便地获取当前路由信息了。

二、React获取当前页面路由

除了获取当前路由信息，有时候我们还需要获取当前页面的路由信息。这可以通过获取当前路由信息来实现。当前页面路由包含了当前路由的路径和参数信息。下面是具体的代码实现：

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

class MyComponent extends React.Component {
  render () {
    const { pathname, search } = this.props.location;
    return (
      <div>
        <h1>当前页面路由：{pathname + search}</h1>
      </div>
    )
  }
}

export default withRouter(MyComponent);

通过props.location获取当前路由信息中的pathname和search，将它们拼接起来即可得到当前页面的路由信息。

三、React获取当前路由地址

有时候我们需要获取当前路由的地址，即不带任何参数的路由地址。这可以通过获取当前路由信息来实现。下面是具体的代码实现：

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

class MyComponent extends React.Component {
  render () {
    const { pathname } = this.props.location;
    return (
      <div>
        <h1>当前路由地址：{pathname}</h1>
      </div>
    )
  }
}

export default withRouter(MyComponent);

通过props.location获取当前路由信息中的pathname即可获取当前路由地址。

四、React获取当前路由路径

有时候我们需要获取当前路由的路径，即去掉最后一个参数之后的路由路径。这可以通过获取当前路由信息来实现。下面是具体的代码实现：

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

class MyComponent extends React.Component {
  render () {
    const { pathname } = this.props.location;
    const path = pathname.split('/').slice(0, -1).join('/');
    return (
      <div>
        <h1>当前路由路径：{path}</h1>
      </div>
    )
  }
}

export default withRouter(MyComponent);

通过props.location获取当前路由信息中的pathname，然后使用split函数将其分割成一个数组，再使用slice函数去掉最后一个参数，最后使用join函数将其拼接起来即可得到当前路由的路径。

五、React获取路由参数

在实际开发中，我们经常需要获取路由参数。React Router提供了多种方式来获取路由参数。下面是几个常用的方法：

1、使用props.match.params获取路由参数。路由参数可以通过路由路径中的参数获取，这可以通过在路由路径中添加参数来实现。下面是具体的代码实现：

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

class MyComponent extends React.Component {
  render () {
    const { id } = this.props.match.params;
    return (
      <div>
        <h1>路由参数：{id}</h1>
      </div>
    )
  }
}

export default withRouter(MyComponent);

在上面的代码中，路由路径中添加了id参数，我们通过props.match.params.id获取路由参数值。

2、使用props.location.search获取路由参数。如果路由参数是通过问号传递的，可以使用props.location.search获取路由参数。下面是具体的代码实现：

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

class MyComponent extends React.Component {
  render () {
    const searchParams = new URLSearchParams(this.props.location.search);
    const id = searchParams.get('id');
    return (
      <div>
        <h1>路由参数：{id}</h1>
      </div>
    )
  }
}

export default withRouter(MyComponent);

在上面的代码中，我们首先将props.location.search传递给URLSearchParams构造函数，然后使用get函数获取路由参数值。

3、使用props.location.state获取路由参数。如果路由参数是通过state传递的，可以使用props.location.state获取路由参数。下面是具体的代码实现：

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

class MyComponent extends React.Component {
  render () {
    const { id } = this.props.location.state;
    return (
      <div>
        <h1>路由参数：{id}</h1>
      </div>
    )
  }
}

export default withRouter(MyComponent);

在上面的代码中，我们直接使用props.location.state获取路由参数值。

六、React获取路由最后参数

在实际开发中，我们还经常需要获取路由路径中的最后一个参数。这可以通过获取当前路由信息和使用正则表达式来实现。下面是具体的代码实现：

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

class MyComponent extends React.Component {
  render () {
    const { pathname } = this.props.location;
    const id = pathname.match(/[^/]+$/)[0];
    return (
      <div>
        <h1>路由最后参数：{id}</h1>
      </div>
    )
  }
}

export default withRouter(MyComponent);

在上面的代码中，我们首先使用props.location获取当前路由信息中的pathname，然后使用正则表达式匹配路径中的最后一个参数，并使用match函数获取其值。

七、React获取路由问号中的参数

在实际开发中，我们经常需要获取路由问号中的参数。React Router提供了一种非常简单的方式来获取路由问号中的参数，这可以通过使用query-string库来实现。下面是具体的代码实现：

1、安装query-string库。首先需要安装query-string库，可以在控制台输入以下命令进行安装：

npm install query-string

2、引入query-string库。安装完毕后，需要在应用程序中引入query-string库，可以在index.js文件中添加以下代码：

import queryString from 'query-string';

3、使用query-string库的parse函数。最后，在要使用路由问号中的参数的组件中使用query-string库的parse函数即可获取路由问号中的参数。下面是示例代码：

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

class MyComponent extends React.Component {
  render () {
    const { search } = this.props.location;
    const params = queryString.parse(search);
    const id = params.id;
    return (
      <div>
        <h1>路由问号中的参数：{id}</h1>
      </div>
    )
  }
}

export default withRouter(MyComponent);

通过query-string库的parse函数，我们可以将路由问号中的参数解析成一个对象，然后就可以方便地获取其值了。