React是一个非常流行的
前端库，常用于开发单页应用程序（SPA）。在SPA中，路由是非常重要的，因为它允许我们在不刷新页面的情况下切换页面视图。在React中，我们可以使用React Router来实现路由功能。React Router是一个独立的库，可以与React一起使用。
在React中，我们可以使用函数组件或类组件来定义我们的路由。这里我们将讨论函数组件路由配置的
几种方法以及路由
传参的
几种方法。然后，我们将看看如何使用类组件来获取路由参数。
## 函数组件路由配置的
几种方法
### 方法1：使用React Router的`<Route>`组件
React Router提供了一个`<Route>`组件，我们可以用它来定义我们的路由。下面是一个例子：
```javascript
import { BrowserRouter as Router, Route } from 'react-router-dom'
function App() {
return (
<Router>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Router>
)
}
```
在上面的代码中，我们首先导入了`BrowserRouter`和`Route`组件。然后，我们在`<Router>`组件中定义了三个路由，分别是`"/"`，`"/about"`和`"/contact"`。每个路由都有一个对应的组件，当用户访问该路由时，将呈现该组件。
### 方法2：使用React Router的`<Switch>`组件
如果我们使用上面的方法定义路由，当我们访问`"/about"`时，React将同时呈现`"/"`和`"/about"`，因为它们都匹配了路径。要解决这个问题，我们可以使用`<Switch>`组件。`<Switch>`组件只会呈现第一个匹配的路由，其余的路由都将被忽略。下面是一个例子：
```javascript
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
function App() {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</Router>
)
}
```
在上面的代码中，我们用`<Switch>`组件替换了`<Router>`组件。现在，当我们访问`"/about"`时，只有`"/about"`路由匹配，因此只会呈现`About`组件。
### 方法3：使用React Router Hooks
React Router还提供了一些Hooks，例如`useHistory`，`useLocation`和`useParams`。这些Hooks允许我们在函数组件中访问路由信息。下面是一个例子：
```javascript
import { BrowserRouter as Router, Switch, Route, Link, useHistory, useLocation, useParams } from 'react-router-dom';
function App() {
return (
<Router>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</Router>
);
}
function About() {
const history = useHistory();
const location = useLocation();
const params = useParams();
return (
<div>
<h2>About</h2>
<p>当前路径：{location.pathname}</p>
<p>查询参数：{JSON.stringify(location.search)}</p>
<p>路由参数：{JSON.stringify(params)}</p>
<button onClick={() => history.goBack()}>返回</button>
</div>
);
}
```
在上面的代码中，我们定义了一个`About`组件，并使用`useHistory`，`useLocation`和`useParams` Hooks来访问路由信息。`useHistory` Hook允许我们访问`history`对象，它包含有关浏览器历史记录的信息，例如前进，后退和推送新条目。`useLocation` Hook允许我们访问`location`对象，它包含有关当前
URL的信息，例如路径和查询参数。`useParams` Hook允许我们访问路由参数。
## 路由
传参的
几种方法
### 方法1：使用
URL参数
使用
URL参数是一种常见的路由
传参方法。我们可以在
URL中包含参数，然后在组件中使用路由参数来访问它们。下面是一个例子：
```javascript
import { BrowserRouter as Router, Route, Link, useParams } from 'react-router-dom';
function App() {
return (
<Router>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about/:name" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</Router>
);
}
function About() {
const { name } = useParams();
return (
<div>
<h2>About {name}</h2>
</div>
);
}
```
在上面的代码中，我们在路由路径中包含了一个参数`:name`。当用户访问`/about/john`时，我们可以使用`useParams` Hook来访问`name`参数。
### 方法2：使用查询参数
使用查询参数是另一种常见的路由
传参方法。我们可以在
URL中包含查询参数，然后在组件中使用`useLocation` Hook来访问它们。下面是一个例子：
```javascript
import { BrowserRouter as Router, Route, Link, useLocation } from 'react-router-dom';
function App() {
return (
<Router>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to={{ pathname: '/about', search: '?name=john' }}>About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</Router>
);
}
function About() {
const location = useLocation();
const params = new
URLSearchParams(location.search);
const name = params.get('name');
return (
<div>
<h2>About {name}</h2>
</div>
);
}
```
在上面的代码中，我们在`<Link>`组件中使用了一个对象来设置查询参数。然后，在`About`组件中，我们使用`useLocation` Hook来访问`location`对象，然后使用`
URLSearchParams`来解析查询参数。
### 方法3：使用状态
使用状态是一种更高级的路由
传参方法。我们可以在一个组件中设置状态，然后将该状态作为参数传递给另一个组件。下面是一个例子：
```javascript
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
function App() {
return (
<Router>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</Router>
);
}
function About(props) {
const [name, setName] = useState('');
return (
<div>
<h2>About {name}</h2>
<input type="text" value={name} onChange={(e) => setName(e.target.value)} />
<button onClick={() => props.history.push(`/about/${name}`)}>提交</button>
</div>
);
}
```
在上面的代码中，我们在`About`组件中设置了一个状态`name`，并将其作为参数传递给另一个组件。然后，我们使用`useState` Hook来设置和更新该状态。当用户点击提交按钮时，我们使用`props.history.push`方法将状态传递给另一个组件。
## 用类组件获取路由参数
除了使用函数组件，我们还可以使用类组件来定义我们的路由。下面是一个例子：
```javascript
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
class App extends Component {
render() {
return (
<Router>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about/john">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about/:name" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</Router>
);
}
}
class About extends Component {
render() {
const { match } = this.props;
const { name } = match.params;
return (
<div>
<h2>About {name}</h2>
</div>
);
}
}
```
在上面的代码中，我们使用类组件定义了我们的路由。当用户访问`/about/john`时，我们可以使用`match.params`来访问路由参数。
930
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
