ReactHooks——路由

安装react-router-dom

npm install react-router-dom --save-dev 

引入

import { BrowserRouter as Router,Routes, Route, BrowserRouter } from "react-router-dom";

使用

  <Route path="/" element={<Home />} />

全部代码

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router,Routes, Route, BrowserRouter } from "react-router-dom";
import "./index.css";
import reportWebVitals from "./reportWebVitals";
import Home from "./pages/home/home";

ReactDOM.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<Home />} />
    </Routes>
  </BrowserRouter>,
  document.getElementById("root")
);

reportWebVitals();

路由跳转

import { useNavigate } from 'react-router-dom';

 const navigate = useNavigate()
 navigate(path)

全部代码

import React from "react";
import { headernavList } from "./data";
import { useNavigate } from 'react-router-dom';

const Header =()=>{
    const navigate = useNavigate()
    const goto= (path:any)=>{
        navigate(path)
    }
    return (
        <>
            <div>
               {
                   headernavList.map(item=>(
                       <div key={item.id} onClick={()=>goto(item.path)}>
                           {item.name}
                       </div>
                   ))
               }
            </div>
        </>
    )
}
export default Header