react V6版本路由使用方法

1、App.tsx

import React from "react";
import EchartsP from "./pages/echartsP";
import P1 from "./pages/antX6/p1";
import {
  Route,
  Routes,
  BrowserRouter as Router,
  Navigate,
} from "react-router-dom";
function App() {
  return (
    <div className="App">
      <Router>
        {/* <Link to="/" ><Button> 点击跳转大屏 </Button></Link>
          <Link to="/p1" ><Button> 点击跳转X6 </Button></Link> */}
        <Routes>
          {/* 重定向 */}
          <Route path="*" element={<Navigate to="/p1" />}></Route>
          <Route path="/big" element={<EchartsP />}></Route>
          <Route path="/p1/*" element={<P1 />}></Route>
        </Routes>
      </Router>
    </div>
  );
}

export default App;

•  顺序：Router - Routes - Route
• 重定向   < Route path = "*" element = {<Navigate to = "/p1" />}></Route>

• P1组件内还有子级路由   <Route path="/p1/*" element={<P1 />}></Route>

将子级路由写在P1组件里

 

import React from 'react'
import { Button } from 'antd'
import { useNavigate } from 'react-router-dom'
import {
  Route,
  Routes,
  BrowserRouter as Router,
  Navigate,
} from "react-router-dom";
import Canvas from "./graph";

export default function P1() {
  const navigate = useNavigate()
  return (
    <div>
      <Button onClick={() => { navigate("/p1/canvas") }}>画布</Button>
      <div>
        <Routes>
            //重定向
          <Route path="*" element={<Navigate to="canvas"/>}></Route>
          <Route path="canvas" element={<Canvas />}></Route>
        </Routes>
      </div>
    </div>
  )
}