在 React 中使用 React Router (V5版)可以实现类似于 Vue Router 的路由跳转、获取参数和编程式导航、获取路由对象等功能。以下是一些常用的方法:
- 编程式导航 :您可以使用
useHistory
钩子进行编程式导航。以下是一个示例:
js
import { useHistory } from "react-router-dom";
function HomeButton() {
let history = useHistory();
function handleClick() {
history.push("/home");
}
return (
<button type="button" onClick={handleClick}>
回到首页
</button>
);
}
- 重定向 :您可以使用
Redirect
组件将用户重定向到不同的页面。以下是一个示例:
js
import { Redirect } from "react-router-dom";
function LoginPage() {
// ... 登录逻辑
return (
<div>
{isLoggedIn ? <Redirect to="/dashboard" /> : <LoginForm />}
</div>
);
}
- 前进或后退 :您可以使用
useHistory
钩子中的goBack
和goForward
函数实现前进和后退。以下是一个示例:
js
import { useHistory } from "react-router-dom";
function BackButton() {
let history = useHistory();
function handleClick() {
history.goBack();
}
return (
<button type="button" onClick={handleClick}>
后退
</button>
);
}
function ForwardButton() {
let history = useHistory();
function handleClick() {
history.goForward();
}
return (
<button type="button" onClick={handleClick}>
前进
</button>
);
}
- 获取 URL 中的参数 :您可以使用
useParams
钩子获取 URL 中的参数。以下是一个示例:
js
import { useParams } from "react-router-dom";
function UserDetails() {
let { userId } = useParams();
return (
<div>
<h1>User ID: {userId}</h1>
</div>
);
}
- 获取路由信息对象 :您可以使用
useRouteMatch
钩子获取有关路由的信息。以下是一个示例:
js
import { useRouteMatch } from "react-router-dom";
function About() {
let match = useRouteMatch();
return (
<div>
<h1>About</h1>
<p>You are now on the "About" page.</p>
<p>The URL matched is {match.path}.</p>
</div>
);
}
- 嵌套路由 :您可以使用
Route
组件的path
属性和children
属性创建嵌套路由。以下是一个示例:
js
import { Route, Switch } from "react-router-dom";
function App() {
return (
<Switch>
<Route path="/admin" component={Admin}>
<Route path="/admin/dashboard" component={Dashboard} />
<Route path="/admin/settings" component={Settings} />
</Route>
</Switch>
);
}
- 守卫路由 :您可以使用
Route
组件的render
属性或useEffect
钩子来实现路由守卫。以下是一个示例:
js
import { Route, Redirect } from "react-router-dom";
function PrivateRoute({ component: Component, ...rest }) {
const isAuthenticated = // ... 检查用户是否已登录
return (
<Route
{...rest}
render={props =>
isAuthenticated ? (
<Component {...props} />
) : (
<Redirect to="/login" />
)
}
/>
);
}