说明:声明式导航是指通过在模版中通过组件描述出要跳转到哪里去,比如后台管理系统的左侧菜单通常使用这种方式进行。
- import {Link} from "react-router-dom"
- const Login=()=>{
- return (
- <div>我是登录页面
- <Link to={"/home"}>跳转Home页Link>
- div>
- )
- }
- export default Login
- import Login from "../page/Login";
- import Home from "../page/Home";
-
-
- import {createBrowserRouter} from "react-router-dom"
-
-
- const router=createBrowserRouter([
- {
- path:"/login",
- element:<Login>Login>
- },
- {
- path:"/home/:id/:username",
- element:<Home>Home>
- }
- ]
- )
-
- export default router
- import { useParams } from "react-router-dom"
-
- const Home=()=>{
- // const [params]=useSearchParams()
- const params=useParams()
- return (
- <div>我是home页面id{params.id}
- <div>我是home页面username{params.username}div>
- div>
-
- )
- }
- export default Home
说明:编程式导航是指通过`useNavigate`钩子得到导航方法,然后通过调用方法以命令式的形式进行路由跳转,比如想在登录请求完毕之后跳转就可以选择这种方式,更加灵活。
- import {Link,useNavigate} from "react-router-dom"
- const Login=()=>{
- const navigation=useNavigate()
- return (
- <div>我是登录页面
- {/* 声明式写法 */}
- <Link to={"/home"}>跳转Home页Link>
- {/* 命令式写法 */}
- <button onClick={()=>navigation("/home")}>跳转Home页button>
- div>
- )
- }
- export default Login
- import {Link,useNavigate} from "react-router-dom"
- const Login=()=>{
- const navigation=useNavigate()
- return (
- <div>我是登录页面
- {/* 声明式写法 */}
- <Link to={"/home"}>跳转Home页Link>
- {/* 命令式写法 */}
- <button onClick={()=>navigation("/home")}>跳转Home页button>
- <button onClick={()=>navigation("/home?id=1&&username=forever")}>跳转Home页(传参)button>
- div>
- )
- }
- export default Login
说明:home获取参数。
- import { useSearchParams } from "react-router-dom"
-
- const Home=()=>{
- const [params]=useSearchParams()
-
- return (
- <div>我是home页面{params.get("id")}
- <div>我是home页面{params.get("username")}
- div>
- div>)
- }
- export default Home