一、React获取路由参数的方法
React是一款流行的JavaScript库，被广泛用于构建单页应用程序。而获取路由参数是在React应用程序中一项很常见的任务。常见的获取路由参数的方法如下：
- 使用React Router获取参数
- 监听路由变化和传递参数
- 获取URL参数
二、React Router获取参数
React Router是一个流行的React社区库，它对路由进行了高度抽象，允许你以声明性方式定义你的路由。
使用React Router获取参数的方法有多种，其中比较简单的是利用match对象来获取路由参数。
import { BrowserRouter as Router, Route } from 'react-router-dom';
function App() {
return (
<Router>
<div>
<Route path="/:id" component={Child} />
</div>
</Router>
);
}
function Child({ match }) {
return <h3>ID: {match.params.id}</h3>;
}
上面的代码中，父组件App渲染了一个Route子组件，这个子组件的路径为/:id，它会匹配任何路径为“/XXX”的URL（其中XXX是一个参数）。当匹配到一个URL时，React Router会在props对象中提供一个match对象，通过该对象可以访问路径参数。
三、React路由参数变化 页面不变
在应用程序中，我们常常需要在页面不刷新的情况下更新路由参数。为此，可以使用React Router中的withRouter高阶组件来实现。
import React from 'react';
import { withRouter } from 'react-router-dom';
class MyComponent extends React.Component {
componentDidMount() {
this.unlisten = this.props.history.listen((location, action) => {
console.log('location:', location);
console.log('action:', action);
});
}
componentWillUnmount() {
this.unlisten();
}
render() {
return <div>My Component</div>;
}
}
export default withRouter(MyComponent);
上面的代码中，withRouter高阶组件允许我们将路由属性（如history和location等）添加到我们的组件Props中。我们可以使用history.listen来监听路由变化，从而实现参数变化。
四、React获取地址栏参数
在React中获取地址栏参数可以使用window.location对象，但是这种方法并不好用，因为React应用程序通常是单页应用（SPA），而URL的改变并不会导致页面的刷新。
class MyComponent extends React.Component {
handleClick = () => {
const searchParams = new URLSearchParams(window.location.search);
console.log(searchParams.get('name'));
}
render() {
return (
<div>
<button onClick={this.handleClick}>Get Name</button>
</div>
);
}
}
上面的代码中，我们通过创建一个URLSearchParams对象来获取URL参数。这种方法只有在React应用程序的URL发生变化时才能生效，如果URL没有变化，那么无论多少次调用都会返回相同的结果。
五、React获取当前路由地址
在某些情况下，我们需要获取当前页面的路由地址。可以使用withRouter高阶组件来实现：
import { withRouter } from 'react-router';
class MyComponent extends React.Component {
render() {
const { location } = this.props;
return <h3>Current URL: {location.pathname}</h3>;
}
}
export default withRouter(MyComponent);
上面的代码中，我们使用withRouter高阶组件将location属性添加到组件Props中，从而可以使用location.pathname获取当前路由地址。
六、React获取url后面的参数
我们可以通过window.location.search获取url后面的参数：
class MyComponent extends React.Component {
handleClick = () => {
const searchParams = new URLSearchParams(window.location.search);
console.log(searchParams.get('id'));
}
render() {
return (
<div>
<button onClick={this.handleClick}>Get ID</button>
</div>
);
}
}
上面的代码中，我们使用window.location.search来获取URL后面的参数，并使用URLSearchParams对象来解析参数。
七、React路由传递参数
在React中，我们可以通过props将参数传递给子组件。在路由中，我们可以使用React Router的路由属性来传递参数：
import { BrowserRouter as Router, Route } from 'react-router-dom';
function App() {
return (
<Router>
<div>
<Route path="/" exact component={Home} />
<Route path="/about/:name" component={About} />
</div>
</Router>
);
}
function About(props) {
return (
<div>
<h3>Hello {props.match.params.name}!</h3>
</div>
);
}
上面的代码中，我们在路由属性中定义了一个“/about/:name”的路径。在About组件中，我们可以通过props.match.params.name来访问路由参数。
八、React路由参数
在React应用程序中，我们可以使用React Router的Route组件来定义路由。Route组件可以匹配多个路径，并使用component属性来指定要渲染的组件。在组件中我们可以通过props.match.params访问路由参数：
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
function App() {
return (
<Router>
<div>
<ul>
<li><Link to="/about/react">React</Link></li>
<li><Link to="/about/angular">Angular</Link></li>
<li><Link to="/about/vue">Vue</Link></li>
</ul>
<Route path="/about/:name" component={About} />
</div>
</Router>
);
}
function About(props) {
return (
<div>
<h2>Hello {props.match.params.name}!</h2>
</div>
);
}
上面的代码中，我们定义了一个包含三个链接的列表，在/ about / ：name路由下渲染About组件。通过props.match.params.name，我们可以访问路由参数。例如，如果我们点击React链接，则会显示“Hello React！”。
