React
Router 提供了一些钩子函数来
拦截路由，这样我们就可以在
路由跳转之前或之后进行相关的操作。下面是一个简单的
路由拦截示例：
```javascript
import React from 'react';
import { Browser
Router as
Router, Route, Link, Redirect } from 'react-
router-dom';
const isAuthenticated = true;
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={(props) => (
isAuthenticated === true
? <Component {...props} />
: <Redirect to='/login' />
)} />
);
const LoginPage = () => (
<div>
<h1>Login Page</h1>
</div>
);
const HomePage = () => (
<div>
<h1>Home Page</h1>
</div>
);
const App = () => (
<
Router>
<div>
<ul>
<li><Link to='/'>Home</Link></li>
<li><Link to='/login'>Login</Link></li>
</ul>
<hr />
<PrivateRoute exact path='/' component={HomePage} />
<Route path='/login' component={LoginPage} />
</div>
</
Router>
);
export default App;
```
在上面的代码中，我们定义了一个 `PrivateRoute` 组件来实现
路由拦截。如果用户已经认证，则展示 `component` 组件，否则重定向到登录页面。
另外，我们还定义了两个页面组件：`HomePage` 和 `LoginPage`。在 `App` 组件中，我们使用 `PrivateRoute` 组件来保护 `HomePage` 组件，这样只有已经认证的用户才能访问该页面。
如果你想在
路由跳转之前进行相关的操作，可以使用 `react-
router` 提供的 `Prompt` 组件。下面是一个简单的示例：
```javascript
import React, { useState } from 'react';
import { Browser
Router as
Router, Route, Link, Prompt } from 'react-
router-dom';
const App = () => {
const [isBlocking, setIsBlocking] = useState(false);
const handleChange = (event) => {
setIsBlocking(event.target.value.length > 0);
};
return (
<
Router>
<div>
<ul>
<li><Link to='/'>Home</Link></li>
<li><Link to='/about'>About</Link></li>
</ul>
<hr />
<Prompt
when={isBlocking}
message={location => `Are you sure you want to go to ${location.pathname}?`}
/>
<Route exact path='/' render={() => (
<div>
<h1>Home Page</h1>
<input type='text' onChange={handleChange} />
</div>
)} />
<Route path='/about' render={() => (
<div>
<h1>About Page</h1>
</div>
)} />
</div>
</
Router>
);
};
export default App;
```
在上面的代码中，我们使用 `Prompt` 组件来
拦截路由，在用户输入内容时，如果尚未保存，就弹出提示框。提示框的内容可以通过 `message` 属性来设置。如果用户选择离开当前页面，则
路由会跳转到目标页面。
4202
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
