You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
2.0 KiB
120 lines
2.0 KiB
# React-Router-Dom 6
|
|
|
|
* 安装
|
|
|
|
```bash
|
|
npm i react-router-dom@6
|
|
```
|
|
|
|
* 导入
|
|
|
|
```jsx
|
|
import ReactDOM from "react-dom/client";
|
|
import { BrowserRouter } from "react-router-dom";
|
|
import App from "./App";
|
|
|
|
const root = ReactDOM.createRoot(
|
|
document.getElementById("root")
|
|
);
|
|
root.render(
|
|
<BrowserRouter>
|
|
<App />
|
|
</BrowserRouter>
|
|
);
|
|
```
|
|
|
|
* 简单链接
|
|
|
|
```jsx
|
|
import { Link } from "react-router-dom";
|
|
|
|
export default function App() {
|
|
return (
|
|
<div>
|
|
<h1>Bookkeeper</h1>
|
|
<nav
|
|
style={{
|
|
borderBottom: "solid 1px",
|
|
paddingBottom: "1rem",
|
|
}}
|
|
>
|
|
<Link to="/invoices">Invoices</Link> |{" "}
|
|
<Link to="/expenses">Expenses</Link>
|
|
</nav>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
Link正在更改URL而不会导致整个页面重新加载。
|
|
|
|
* 链接点
|
|
|
|
```jsx
|
|
import ReactDOM from "react-dom/client";
|
|
import {
|
|
BrowserRouter,
|
|
Routes,
|
|
Route,
|
|
} from "react-router-dom";
|
|
import App from "./App";
|
|
import Expenses from "./routes/expenses";
|
|
import Invoices from "./routes/invoices";
|
|
|
|
const root = ReactDOM.createRoot(
|
|
document.getElementById("root")
|
|
);
|
|
root.render(
|
|
<BrowserRouter>
|
|
<Routes>
|
|
<Route path="/" element={<App />} />
|
|
<Route path="expenses" element={<Expenses />} />
|
|
<Route path="invoices" element={<Invoices />} />
|
|
</Routes>
|
|
</BrowserRouter>
|
|
);
|
|
```
|
|
|
|
* 嵌套路由
|
|
|
|
```jsx
|
|
root.render(
|
|
<BrowserRouter>
|
|
<Routes>
|
|
<Route path="/" element={<App />}>
|
|
<Route path="expenses" element={<Expenses />} />
|
|
<Route path="invoices" element={<Invoices />} />
|
|
</Route>
|
|
</Routes>
|
|
</BrowserRouter>
|
|
);
|
|
```
|
|
|
|
* 找不到的页面
|
|
|
|
```jsx
|
|
<Routes>
|
|
<Route path="/" element={<App />}>
|
|
<Route path="expenses" element={<Expenses />} />
|
|
<Route path="invoices" element={<Invoices />} />
|
|
<Route
|
|
path="*"
|
|
element={
|
|
<main style={{ padding: "1rem" }}>
|
|
<p>There's nothing here!</p>
|
|
</main>
|
|
}
|
|
/>
|
|
</Route>
|
|
</Routes>
|
|
```
|
|
|
|
* 传参
|
|
|
|
```
|
|
|
|
|
|
let params = useParams();
|
|
let invoice = getInvoice(parseInt(params.invoiceId, 10));
|
|
```
|
|
|
|
|