react-router路由拦截教程
时间: 2023-08-03 10:09:47 浏览: 54
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` 属性来设置。如果用户选择离开当前页面,则路由会跳转到目标页面。