在 React 中使用 React Router 可以实现类似于 Vue Router 的路由跳转、获取参数和编程式导航、获取路由对象等功能。以下是一些常用的方法：
- 编程式导航：您可以使用
useHistory钩子进行编程式导航。以下是一个示例：
import { useHistory } from "react-router-dom";function HomeButton() {let history = useHistory();function handleClick() {history.push("/home");}return (<button type="button" onClick={handleClick}>回到首页</button>);
}
- 重定向：您可以使用
Redirect组件将用户重定向到不同的页面。以下是一个示例：
import { Redirect } from "react-router-dom";function LoginPage() {// ... 登录逻辑return (<div>{isLoggedIn ? <Redirect to="/dashboard" /> : <LoginForm />}</div>);
}
- 前进或后退：您可以使用
useHistory钩子中的goBack和goForward函数实现前进和后退。以下是一个示例：
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 中的参数。以下是一个示例：
import { useParams } from "react-router-dom";function UserDetails() {let { userId } = useParams();return (<div><h1>User ID: {userId}</h1></div>);
}
- 获取路由信息对象：您可以使用
useRouteMatch钩子获取有关路由的信息。以下是一个示例：
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属性创建嵌套路由。以下是一个示例：
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钩子来实现路由守卫。以下是一个示例：
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" />)}/>);
}
