react路由使用 2024

关注

原创最新推荐文章于 2026-11-04 20:00:30 发布 247 阅读 AI 写同款· GEO 优化 ›

react路由之旅第一讲基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。什么？你问面试题资料在哪里，这不是就在你眼前吗（滑稽包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！阅读详情

react路由使用 2024

1.安装

yarn add react-router-dom

2.定义routes

import Home from "../views/home";
import Search from "../views/search";
import Cart from "../views/cart";
import Mine from "../views/mine";

export const routes=[
    {
        path:'/',
        name:'home',
        component:Home
    },
    {
        path:'/home',
        name:'home',
        component:Home
    },
    {
        path:'/search',
        name:'search',
        component:Search
    },
    {
        path:'/cart',
        name:'cart',
        component:Cart
    },
    {
        path:'/mine',
        name:'mine',
        component:Mine
    },
]

3.定义导航

import {NavLink} from "react-router-dom";
export default function Menu(){
    const items=[
        {path:'/home',title:'home'},
        {path:'/cart',title:'cart'},
        {path:'/search',title:'search'},
        {path:'/mine',title:'mine'},
    ]
    return (
        <ul>
            {
                items.map((item,i)=>(
                    <li key={i}>
                        <NavLink to={item.path}>
                            <span>{item.title}</span>
                        </NavLink>
                    </li>
                ))
            }
        </ul>
    )
}

4.定义路由页面结构

import React,{Component} from "react";
import './App.css'
import {BrowserRouter, Routes, Route} from 'react-router-dom'
import {routes} from "./router";
import Menu from "./views/menu";
function App() {

  return (
    <div className="content">
        <BrowserRouter>
            <Routes>
                {routes.map(route=>
                                       <Route
                                          path={route.path}
                                          key={route.name}
                                          element={<route.component/>}/>)}
            </Routes>
            <Menu/>
        </BrowserRouter>
    </div>
  );
}
export default App;