Day03 react-router-dom v6学习

安装react-router-dom

npm install react-router-dom

index.js引入并使用

BrowserRouter包裹着app

import React from 'react';
import ReactDOM from 'react-dom/client';
// 使用react-router-dom插件中的BrowserRouter实现路由跳转
import { BrowserRouter } from "react-router-dom"
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

app.js

import { Route, Routes, Navigate, NavLink} from "react-router-dom"
import User from "./pages/user"
import Goods from "./pages/goods"
import Menu from "./pages/menu"
import HomePage from "./pages/homePage"

function App() {
  return (
    <div>
      <Routes>
        //不指定具体路径 跳转页面
        <Route path="/" element={<HomePage />} />
        <Route path="/user" element={<User />} />
        //页面跳转并传递参数(可不传)
        <Route path="/goods/:id?/:goodsName?" element={<Goods />} />
        <Route path="/menu" element={<Menu />} />
        //路由跳转重定向
        <Route path="*" element={<Navigate to="/User" />} />
      </Routes>
        //点击进行页面跳转
      <NavLink to='/'>首页</NavLink> |
      <NavLink to='/goods/123/IQOO'>商品[传参]</NavLink> |
      <NavLink to='/goods'>商品[不传参]</NavLink> |
      <NavLink to='/user'>我的</NavLink> |
      <NavLink to='/menu'>菜单</NavLink>
    </div>
  );
}

export default App;

页面获取参数并点击跳转新页面

//API说明    useNavigate:跳转新页面    useParams:获取路由参数
import { useParams, useNavigate } from 'react-router-dom';
function Goods() {

  const navigate = useNavigate()
  function handleUserPage() {
    navigate('/user')
  }
  const { id, goodsName } = useParams();
  return (
    <div>goods==={id}===={goodsName}
      <div onClick={handleUserPage}>点击跳转user页面</div>
    </div>

  )
}
export default Goods