前端react入门day06-ReactRouter

最新推荐文章于 2024-07-24 23:00:08 发布

小周不摆烂

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量561

点赞数 21

分类专栏： # 前端react入门文章标签：前端 react.js 前端框架 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_73295475/article/details/140245845

版权

前端react入门专栏收录该内容

6 篇文章 5 订阅

订阅专栏

(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹）

什么是前端路由

一个路径 path 对应一个组件 component 当我们在浏览器中访问一个 path 的时候，path 对应的组件会在页面中进行渲染

创建路由开发环境

使用路由我们还是采用CRA创建项目的方式进行基础环境配置

1. 创建项目并安装所有依赖

npx create-react-app react-router-pro

npm i

2. 安装最新的 ReactRouter包

npm i react-router-dom

3. 启动项目

npm run start

快速开始

需求：创建一个可以切换登录页和文章页的路由系统

抽象路由模块

实际开发中的router配置

article:

import { useParams, useSearchParams } from "react-router-dom"

const Article = () => {
  // const [params] = useSearchParams()
  // const id = params.get('id')
  // const name = params.get('name')

  const params = useParams()
  const id = params.id
  const name = params.name
  return <div>我是文章页{id}-{name}</div>
}

export default Article

import { Link, useNavigate } from 'react-router-dom'
const Login = () => {
  const navigate = useNavigate()
  return (
    <div>
      我是登录页
     
    </div>
  )
}

export default Login

router:

import Login from '../page/Login'
import Article from '../page/Article'
import { createBrowserRouter, createHashRouter } from 'react-router-dom'
const router = createBrowserRouter([
  {
    path: '/login',
    element: <Login />
  },
  {
    path: '/article/:id/:name',
    element: <Article />
  }
])

export default router

index:

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import reportWebVitals from './reportWebVitals'
import { RouterProvider } from 'react-router-dom'

// 1. 导入路由router
import router from './router'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode>
    {/* 2. 路由绑定 */}
    <RouterProvider router={router}></RouterProvider>
  </React.StrictMode>
)

路由导航

什么是路由导航

路由系统中的多个路由之间需要进行路由跳转，并且在跳转的同时有可能需要传递参数进行通信

声明式导航

声明式导航是指通过在模版中通过 `<Link/> ` 组件描述出要跳转到哪里去，比如后台管理系统的左侧菜单通常使用这种方式进行

语法说明：通过给组件的 to属性指定要跳转到路由path ，组件会被渲染为浏览器支持的a链接，如果需要传参直接通过字符串拼接的方式拼接参数即可
import { Link, useNavigate } from 'react-router-dom'
const Login = () => {
  const navigate = useNavigate()
  return (
    <div>
      我是登录页
      {/* 声明式的写法 */}
      <Link to="/article">跳转到文章页</Link>
   
    </div>
  )
}

export default Login