react router

react router V6

安装

npm i react-router-dom

使用

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

<Router>
    <Routes>
      <Route path={"/"} element={<App />} >
        <Route path={"invoices"} element={<Invoices />} >
         // index类型route,当没有任何选中的时候展示这个
          <Route index element={
            <div>
              select a invoice
            </div>
          }/>
          <Route path=':invoiceId' element={<Invoice/>}/>
        </Route>
        <Route path={"expenses"} element={<Expenses />} />
      </Route>
      // 404所有的不匹配的时候展示
      <Route path={"*"} element={
          <div>
            not found
          </div>
        } />
    </Routes>
  </Router>

import { Outlet, NavLink, useSearchParams } from 'react-router-dom'
import { getInvoices } from "./data"

export default function Invoices() {
    const invoices = getInvoices()
    // 获取的是url参数 ?后面的参数
    const [searchParams, setSearchParams] = useSearchParams()

    return (
        <div style={{ display: 'flex', flexDirection: 'column' }}>
            <input type="text" 
                value={searchParams.get('filter') || ""}
                onChange={(e) => { 
                    let filter = e.target.value
                    if (filter) {
                        setSearchParams({filter})
                    } else {
                        setSearchParams({})
                    }
                 }}
            />
            <nav style={{ padding: '1rem', borderRight: "solid 1px", marginRight: "2rem" }}>
                {
                    invoices
                        .filter(invoice => {
                            let value = searchParams.get('filter')
                            if (!value) {
                                return true
                            }
                            return invoice.name.startsWith(value)
                        })
                        .map((invoice) => (
                            <NavLink style={({ isActive }) => ({
                                display: "block",
                                margin: "1rem 0",
                                color: isActive ? "red" : ""
                            })} to={`/invoices/${invoice.number}`} key={invoice.number} >
                                {invoice.name}
                            </NavLink>
                        ))
                }
            </nav>
            <Outlet />
        </div>
    );
}

import { useParams } from 'react-router-dom'
import { getInvoice } from './data'

export default function Invoice() {
    // 获取路径参数
    let params = useParams()
    let invoice = getInvoice(parseInt(params.invoiceId || "1"))

    return (
        <div>
            <h2>Invoice {params.invoiceId}</h2>
            <p>
                {invoice?.name}: {invoice?.number}
            </p>
            <p>Due Date: {invoice?.due}</p>
        </div>

    )
}