react路由使用 2024

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;