React Router 提供了一些钩子函数来拦截
路由，这样我们就可以在
路由跳转之前或之后进行相关的操作。下面是一个简单的
路由拦截示例：
```
javascript
import
React from '
react';
import { BrowserRouter 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 { BrowserRouter 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` 属性来设置。如果用户选择
离开当前
页面，则
路由会跳转到目标
页面。
本文介绍了如何在React-Router 4中使用Prompt组件实现离开页面时的确认提示。当用户尝试离开包含未保存数据的页面时，系统会显示一个确认对话框。通过设置Prompt的属性和自定义消息，可以灵活控制用户的离开行为。文中还分享了在实际项目中结合ant-design-mobile的Modal对话框解决异步问题的技巧，将异步转换为同步，满足复杂场景的需求。
最低0.47元/天 解锁文章
扫一扫
1531
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
