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>
)
}