国产成人久久,亚洲高清电影,影音先锋男人av资源站,卡一卡二无码免费在线,18岁毛片,操逼视频国产,亚洲自拍偷拍视频,久草综合视频

安裝

npm install react-router-dom@6

配置路由

import { render } from "react-dom";import {  BrowserRouter,  Routes,  Route} from "react-router-dom";// import your route components too
render(  <BrowserRouter>    <Routes>      <Route path="/" element={<App />}>        <Route index element={<Home />} />        <Route path="teams" element={<Teams />}>          <Route path=":teamId" element={<Team />} />          <Route path="new" element={<NewTeamForm />} />          <Route index element={<LeagueStandings />} />        Route>      Route>    Routes>  BrowserRouter>,  document.getElementById("root"));

在以前版本的 React Router 中，當(dāng)多個(gè)路由匹配一個(gè)不明確的 URL 時(shí)，你必須以某種方式對(duì)你的路由進(jìn)行排序才能得到正確的渲染。V6 更聰明，會(huì)選擇最具體的匹配，所以你不必再擔(dān)心了。例如，URL /teams/new?匹配這兩個(gè)路由：

"teams/:teamId" element={} /><Route path="teams/new" element={<NewTeamForm />} />

由于?teams/new?比?/teams/:teamId?是更具體的匹配，因此??將呈現(xiàn)。

導(dǎo)航

使用 Link 讓用戶更改 URL 或者用 useNavigate 自己做跳轉(zhuǎn)：

import { Link } from "react-router-dom";
function Home() {  return (    <div>      <h1>Homeh1>      <nav>        <Link to="/">HomeLink> |{" "}        <Link to="about">AboutLink>      nav>    div>  );}

import { useNavigate } from "react-router-dom";
function Invoices() {  let navigate = useNavigate();  return (    <div>      <NewInvoiceForm        onSubmit={async event => {          let newInvoice = await createInvoice(            event.target          );          navigate(`/invoices/${newInvoice.id}`);        }}      />    div>  );}

讀取 URL 參數(shù)

在路由路徑中使用?:style?語法，組件中用?useParams()?取值：

import { Routes, Route, useParams } from "react-router-dom";
function App() {  return (    <Routes>      <Route        path="invoices/:invoiceId"        element={<Invoice />}      />    Routes>  );}
function Invoice() {  let params = useParams();  return <h1>Invoice {params.invoiceId}h1>;}

請(qǐng)注意，路徑中?:invoiceId?和參數(shù)的鍵?params.invoiceId?匹配，key 值必須對(duì)應(yīng)。

一個(gè)非常常見的用例是在組件呈現(xiàn)時(shí)獲取數(shù)據(jù)：

function Invoice() {  let { invoiceId } = useParams();  let invoice = useFakeFetch(`/api/invoices/${invoiceId}`);  return invoice ? (    <div>      <h1>{invoice.customerName}h1>    div>  ) : (    <Loading />  );}

嵌套路由

這是 React Router 最強(qiáng)大的功能之一，因此您不必處理復(fù)雜的布局代碼。絕大多數(shù)布局都與 URL 的片段耦合，而 React Router 完全符合了這一點(diǎn)。

路由可以相互嵌套，它們的路徑也會(huì)嵌套（子繼承父）。

function App() {  return (          "invoices" element={}>        ":invoiceId" element={} />        "sent" element={} />            );}

此路由配置定義了三個(gè)路由路徑：

"/invoices""/invoices/sent""/invoices/:invoiceId"

當(dāng) URL 是"/invoices/sent"，組件樹為：

當(dāng) URL 為"/invoices/123"，組件樹為：

請(qǐng)注意隨 URL (和)更改的內(nèi)部組件。父路由 (?) 負(fù)責(zé)確保匹配的子路由使用了?，這是完整的示例：

import { Routes, Route, Outlet } from "react-router-dom";
function App() {  return (          "invoices" element={}>        ":invoiceId" element={} />        "sent" element={} />            );}
function Invoices() {  return (          Invoices          
  );}
function Invoice() {  let { invoiceId } = useParams();  return Invoice {invoiceId}
;}
function SentInvoices() {  return Sent Invoices
;}

嵌套的 url 路徑映射到嵌套的組件樹。這非常適合創(chuàng)建在布局中具有持久導(dǎo)航且內(nèi)部部分隨 URL 變化的 UI。您會(huì)注意到許多網(wǎng)站都具有多層布局嵌套。

索引路由

索引路由可以被認(rèn)為是“默認(rèn)子路由”。當(dāng)父路由有多個(gè)子路由，但 URL 僅在父路由的路徑上時(shí)，您可能希望將某些內(nèi)容渲染到頁面中。

function App() {  return (          "/" element={}>        "invoices" element={} />        "activity" element={} />            );}
function Layout() {  return (                              
    
  );}

這個(gè)頁面在“/invoices”和“/activity”上看起來很棒，但在“/”它只是一個(gè)空白頁面，

?因?yàn)槟抢餂]有子路由渲染。為此，我們可以添加一個(gè)索引路由：

function App() {  return (          "/" element={}>        } />        "invoices" element={} />        "activity" element={} />            );}

現(xiàn)在在“/”處，?元素將在 Outlet 出口內(nèi)呈現(xiàn)。

您可以在路由層次結(jié)構(gòu)的任何級(jí)別擁有一個(gè)索引路由，當(dāng)父級(jí)匹配但其他子級(jí)都不匹配時(shí)，該索引路由將呈現(xiàn)。

function App() {  return (          } />      "dashboard" element={}>        } />                  path="invoices"          element={}        />            );}

相對(duì)鏈接

相對(duì)??值（不以 / 開頭）是相對(duì)于渲染它們的路徑的路徑。下面的兩個(gè)鏈接將鏈接到 /dashboard/invoices 和 /dashboard/team 因?yàn)樗鼈冊(cè)?. 當(dāng)您更改父級(jí)的 URL 或重新排列您的組件時(shí)，這非常好，因?yàn)槟乃墟溄佣紩?huì)自動(dòng)更新。

import {  Routes,  Route,  Link,  Outlet} from "react-router-dom";
function Home() {  return <h1>Homeh1>;}
function Dashboard() {  return (    <div>      <h1>Dashboardh1>      <nav>        <Link to="invoices">InvoicesLink>{" "}        <Link to="team">TeamLink>      nav>      <hr />      <Outlet />    div>  );}
function Invoices() {  return <h1>Invoicesh1>;}
function Team() {  return <h1>Teamh1>;}
function App() {  return (          } />      }>        } />        } />            );}

"Not Found" 路由

當(dāng)沒有其他路由與 URL 匹配時(shí)，您可以使用path="*". 此路由將匹配任何 URL，但具有最弱的優(yōu)先級(jí)，因此路由僅在沒有其他路由匹配時(shí)才會(huì)選擇它。

function App() {  return (          "/" element={} />      "dashboard" element={} />      "*" element={} />      );}

多組路由

盡管您應(yīng)該??在應(yīng)用程序中只擁有一個(gè)，但您可以??在任何需要的地方擁有任意數(shù)量的。每個(gè)??元素獨(dú)立于其他元素運(yùn)行，并選擇一個(gè)子路由進(jìn)行渲染。

function App() {  return (                            "/" element={} />                      path="dashboard"            element={}          />              
                        "/" element={}>            "about" element={} />            "support" element={} />                    "dashboard" element={}>            "invoices" element={} />            "team" element={} />                    "*" element={} />                  
  );}

React Router V6 新特性

安裝