国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

<div id="zvguf"><video id="zvguf"><div id="zvguf"></div></video></div>

react 11之 router6路由（兩種路由模式、兩種路由跳轉(zhuǎn)、兩種傳參與接收參數(shù)、嵌套路由，layout組件、路由懶加載）

2年前作者：小小亮01分類：Toy博客閱讀(26)違法舉報

這篇具有很好參考價值的文章主要介紹了react 11之 router6路由（兩種路由模式、兩種路由跳轉(zhuǎn)、兩種傳參與接收參數(shù)、嵌套路由，layout組件、路由懶加載）。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

react路由1：安裝和兩種模式

npm i react-router-dom
兩種模式
- Router：所有路由組件的根組件，包裹路由的最外層容器
- Link：跳轉(zhuǎn)路由組件
- Routes ：用于定義和渲染路由規(guī)則( 用于替換 Switch 組件)
- Route：路由規(guī)則匹配組件，顯示當(dāng)前規(guī)則對應(yīng)的組件
  - exact => 精確匹配，只有當(dāng) path 和 pathname 完全匹配時才會展示該路由

import React from 'react';
// import { BrowserRouter as Router, Link, Route, Routes } from 'react-router-dom';
import { HashRouter as Router, Link, Route, Routes } from 'react-router-dom';

const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;

const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
};

export default App;

react路由2：兩種路由跳轉(zhuǎn) （命令式與編程式）

2-1 路由跳轉(zhuǎn)-命令式

import React from 'react';
// import { BrowserRouter as Router, Link, Route, Routes } from 'react-router-dom';
import { HashRouter as Router, Link, Route, Routes } from 'react-router-dom';

const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;

const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
};

export default App;

2-2 路由跳轉(zhuǎn)-編程式 - 函數(shù)組件

2-2-1 app.jsx

import React, { Component } from 'react';
import { HashRouter as Router, Route, Routes } from 'react-router-dom';
import About from "./page/About";
import Home from "./page/Home";
export default class App extends Component {
 state = {
 }
 render(){
   return (
    <Router>
      <Routes>
        <Route path="/" element={ <Home />} />
        <Route path="/about" element={ <About />} />
      </Routes>
    </Router>
   )
 }
}

2-2-2 page / Home.jsx


import React from 'react';
import { useNavigate } from 'react-router-dom';
const Home = () => {
  const navigate = useNavigate();
  const goToAbout = () => {
    navigate('/about');
  }
  return (
    <div>
      <h1>Home</h1>
      <button onClick={goToAbout}>Go to About</button>
    </div>
  )
}
export default Home;

2-2-3 page / About.jsx


import React from 'react';
import { useNavigate } from 'react-router-dom';
const About = () => {
  const navigate = useNavigate();
  const goToAbout = () => {
    navigate('/');
  }
  return (
    <div>
      <h1>About</h1>
      <button onClick={goToAbout}>Go to Home</button>
    </div>
  )
}
export default About;

2-2-4 效果

react 11之 router6路由（兩種路由模式、兩種路由跳轉(zhuǎn)、兩種傳參與接收參數(shù)、嵌套路由，layout組件、路由懶加載）,react.js,javascript,ecmascript

react路由3：函數(shù)式組件-編程式導(dǎo)航傳遞參數(shù)

3-1 app.jsx

import React, { Component } from 'react';
import { HashRouter as Router, Route, Routes } from 'react-router-dom';
import About from "./page/About";
import Home from "./page/Home";
export default class App extends Component {
 state = {
 }
 render(){
   return (
    <Router>
      <Routes>
        <Route path="/" element={<Home/>} />
        {/* 精確匹配：只有當(dāng) path 和 pathname 完全匹配時才會展示該路由 */}
        <Route exact path="/about" element={ <About/> } />
      </Routes>
    </Router>
   )
 }
}

3-2 Home.jsx


import React from 'react';
import { useNavigate } from 'react-router-dom';
const Home = () => {
  const navigate = useNavigate();
  const goToAbout = () => {
    // 向about頁面 01:傳遞search參數(shù)數(shù)據(jù)，拼接再url中=> /about?name=homeName ； 02:傳遞state=> 自定義數(shù)據(jù)
    navigate('/about?name=homeName&code=001',{ state: {key:'來自home傳遞'} });
  }
  return (
    <div>
      <p>Home</p>
      <button onClick={goToAbout}>Go to About</button>
    </div>
  )
}
export default Home;

3-3 About.jsx


import React from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
const About = () => {
  const navigate = useNavigate();
  const location = useLocation();
  // 當(dāng)前about頁面 接受 home頁面?zhèn)鬟f的參數(shù)
  console.log('location',location,"location.state",location.state); // location.state {key: '來自home傳遞'}
  const searchParams = new URLSearchParams(location.search);
  const param1 = searchParams.get('name');
  const param2 = searchParams.get('code');
  console.log('param1',param1,'param2',param2); // param1 homeName param2 001

  const goToAbout = () => {
    navigate('/');
  }
  return (
    <div>
      <p>About - key {location.state.key} </p>
      <button onClick={goToAbout}>Go to Home</button>
    </div>
  )
}
export default About;

react路由4：路由重定向

使用 Navigate 組件實現(xiàn)重定向，匹配到 path="*" 需要放置再最后一個

app.jsx

<Route path="*" element={<Navigate to="/" />} />

import React, { Component } from 'react';
import { HashRouter as Router, Navigate, Route, Routes } from 'react-router-dom';
import About from "./page/About";
import Home from "./page/Home";
import Test from "./page/Test";
export default class App extends Component {
 state = {
 }
 render(){
   return (
    <Router>
      <Routes>
        <Route path="/" element={<Home/>} />
        {/* 精確匹配：只有當(dāng) path 和 pathname 完全匹配時才會展示該路由 */}
        <Route exact path="/about" element={ <About/> } />
        <Route exact path="/test" element={ <Test/> } />
        <Route path="*"  element={<Navigate to="/" />} />
      </Routes>
    </Router>
   )
 }
}

react路由5：嵌套路由，layout組件、路由懶加載

index.jsx 入口文件

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import App from "./App";
import store from "./store/index.js";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Provider store={store}>
        <App />
    </Provider>
);

app.js 和 app.css

import React, { Suspense } from "react";
import { HashRouter as Router, Navigate, Route, Routes } from 'react-router-dom';
import "./app.css";
import routes from "./router/index";
const renderRoutes = (routes) => {
  return routes.map((route, index) => {
    const { path, element, children } = route;
    return (
      <Route
        key={index}
        path={path}
        element={element}
      >
        <Route index element={<Navigate to="/home" replace />} />
        {children && renderRoutes(children)}
      </Route>
    );
  });
};

export default function App() {
  return (
    <div id="app">
      <Router>
        <Suspense  fallback={<div>Loading...</div>}>
          <Routes>
            {renderRoutes(routes)}
            <Route path="*"  element={<Navigate to="/home" />} />
          </Routes>
        </Suspense>
      </Router>
    </div>
  );
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,body,#root,#app{
  height: 100vh;
}
body {
  font-family: sans-serif;
  overflow: hidden;
}

router / index.js

import { lazy } from "react";
import { Navigate } from "react-router-dom";
const Layout = lazy(() => import("../5react路由/page/Layout"))
const Home = lazy(() => import("../5react路由/page/Home"))
const About = lazy(() => import('../5react路由/page/About'))
const Test = lazy(() => import("../5react路由/page/Test"))
const News = lazy(() => import("../5react路由/page/Form/News"))
const Form = lazy(() => import("../5react路由/page/Form/Form"))
const routes = [
  {
    path:"/",
    element: <Layout />,
    children:[
      { // 用于重定向到 home page
      	index: true,
      	element: <Navigate to="/home" replace />
	    },
      {
        path: 'home',
        element: <Home/>
      },
      {
        path: 'about',
        element: <About/>,
        exact:true ,// 精準(zhǔn)匹配
      },
      {
        path: 'test',
        element: <Test/>,
        exact:true // 精準(zhǔn)匹配
      }
    ]
  },
  {
    path: 'form',
    element: <Form/>,
    // exact:true ,// 精準(zhǔn)匹配
    children: [
      {
        index: true,
        element: <Navigate to="/form/news" replace />
      },
      {
        path: 'news',
        element: <News/>,
      }
    ]
  },
]

export default routes

page / layout.jsx h5的layout組件

import React from 'react';
import { Outlet, useNavigate } from 'react-router-dom';
import styled from 'styled-components';
const footerList = [
  { path:"/home",name:'首頁',key:'home' },
  { path:"/about",name:'關(guān)于',key:'about' },
  { path:"/test",name:'測試',key:'test' }
]
const AppWrap = styled.div`
  background: #eee;
  height: 100vh;
  .header {
    height: 32px;
    line-height: 32px;
    background: #ddd;
  }
  .main {
    margin-bottom:32px;
    background: #eee;
    height: calc(100% - 64px);
  }
  .footer {
    position: fixed;
    bottom:0;
    left:0;
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .footer-item {
      height: 32px;
      line-height: 32px;
      color: #fff;
      flex: 1;
      text-align: center;
      background: #ccc;
    }
  }
`;
export default function Layout(props) {
  const navigate = useNavigate()
  const goToPage = (item) => {
    console.log('goToPage', item.path);
    navigate(item.path)
  }
  return (
    <AppWrap>
        <div className='header'>header</div>
        <div className='main'><Outlet/></div>
        <div className='footer'>
          {
            footerList.map(item => {
              return (
                <div className='footer-item' key={item.key} onClick={()=>{goToPage(item)}}>{item.name}</div>
              )
            })
          }
        </div>
    </AppWrap>
  )
}

page / Home.jsx


import React from 'react';
const Home = () => {
  return (
    <div>
        <p>home首頁Home</p>
    </div>
  )
}
export default Home;

page / About.jsx


import React from 'react';
import { useNavigate } from 'react-router-dom';
const About = () => {
  const navigate = useNavigate();
  const goToForm = () =>{
    navigate('/form');
  }
  return (
    <div>
      <p>About</p>
      <button onClick={goToForm}>Go to form</button>
    </div>
  )
}
export default About;

page / Test.jsx


import React from 'react';
import { useNavigate } from 'react-router-dom';
const Test = () => {
  const navigate = useNavigate();
  const goToReset = () =>{
    navigate('/aaaa');
  }
  const goToNews = () =>{
    navigate('/form/news');
  }
  return (
    <div>
      <p>Test</p>
      <button onClick={goToReset}>Go to 重定向</button>
      <button onClick={goToNews}>Go to News</button>
    </div>
  )
}
export default Test;

page / form / form.jsx 使用Outlet 渲染子路由


import React from 'react';
import { Outlet, useNavigate } from 'react-router-dom';
const Form = () => {
  const navigate = useNavigate();
  const goToHome = () =>{
    navigate('/home');
  }
  return (
    <div>
      <Outlet />
      <button onClick={goToHome}>Go to Home</button>
    </div>
  )
}
export default Form;

page / form / News/jsx


import React from 'react';
import { useNavigate } from 'react-router-dom';
const News = () => {
  const navigate = useNavigate();
  const goToReset = () =>{
    navigate('/bbb');
  }
  return (
    <div>
      <p>News</p>
      <button onClick={goToReset}>Go to 重定向</button>
    </div>
  )
}
export default News;

效果

react 11之 router6路由（兩種路由模式、兩種路由跳轉(zhuǎn)、兩種傳參與接收參數(shù)、嵌套路由，layout組件、路由懶加載）,react.js,javascript,ecmascript 文章來源地址http://www.zghlxwxcb.cn/news/detail-662000.html

到了這里，關(guān)于react 11之 router6路由（兩種路由模式、兩種路由跳轉(zhuǎn)、兩種傳參與接收參數(shù)、嵌套路由，layout組件、路由懶加載）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符，請點擊違法舉報進(jìn)行投訴反饋，一經(jīng)查實，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費用

React-路由 react-router-dom
前端路由的功能：讓用戶從一個頁面跳轉(zhuǎn)到另一個頁面。前端路由是一套映射規(guī)則，在 React 中，是 URL 路徑與組件的對應(yīng)關(guān)系。使用 React 路由簡單來說就是配置路徑與組件（配對）。路由的本質(zhì): 一個路徑 path 對應(yīng)唯一的一個組件 component 當(dāng)我們訪問一個 path 自動把 p
2024年02月02日
瀏覽(29)
React 路由react-router-dom詳解
前面我們先了解一下路由是什么？路由分類有哪些？內(nèi)置API有哪些？可能有點枯燥，不喜歡看的直接跳過！單頁Web應(yīng)用（single page web application，SPA）。整個應(yīng)用只有一個完整的頁面。點擊頁面中的鏈接不會刷新頁面，只會做頁面的局部更新。數(shù)據(jù)都需要通過ajax請求獲取
2023年04月11日
瀏覽(22)
vue3中使用router路由實現(xiàn)跳轉(zhuǎn)傳參
大家好，今天和大家分享一下vue3中如何進(jìn)行跳轉(zhuǎn)并進(jìn)行傳參。 vue3取消了vue2部分api，所以路由跳轉(zhuǎn)和傳值的方式會有所不同。我們今天主要講router.push(location, onComplete?, onAbort?) vue3中新增API：useRouter和useRoute 1.首先在需要跳轉(zhuǎn)的頁面引入API—useRouter 2.在跳轉(zhuǎn)頁面定義router變量
2023年04月09日
瀏覽(90)
探索React Router:實現(xiàn)動態(tài)二級路由
我有一個路由配置的二維數(shù)組，想根據(jù)這個數(shù)組結(jié)合路由組件來動態(tài)生成路由，應(yīng)該怎么樣實現(xiàn)。在 React Router 6 中渲染二級路由的方式跟 React Router 65相比有一些變化,但核心思路仍然是利用 Route 組件和路由嵌套的方式。下面是具體的步驟: 定義路由數(shù)組注意，這里我們使用
2024年04月25日
瀏覽(26)
React-Router路由基礎(chǔ)篇（簡單易學(xué)）
文章目錄系列文章目錄前言一、pandas是什么？二、使用步驟 1.引入庫 2.讀入數(shù)據(jù) 總結(jié) 提示：這里可以添加本文要記錄的大概內(nèi)容：例如：隨著人工智能的不斷發(fā)展，機(jī)器學(xué)習(xí)這門技術(shù)也越來越重要，很多人都開啟了學(xué)習(xí)機(jī)器學(xué)習(xí)，本文就介紹了機(jī)器學(xué)習(xí)的基礎(chǔ)內(nèi)容。（
2024年04月14日
瀏覽(24)
React07-路由管理器react-router-dom（v6）
react-router 是一個流行的用于 React 應(yīng)用程序路由的庫。它使我們能夠輕松定義應(yīng)用程序的路由，并將它們映射到特定的組件，這樣可以很容易地創(chuàng)建復(fù)雜的單頁面應(yīng)用，并管理應(yīng)用程序的不同視圖。 react-router 是基于 React 構(gòu)建的，因此與其他 React 庫和工具集成得很好。它在許
2024年02月02日
瀏覽(20)
vue通過router地址傳參跳轉(zhuǎn)同一路由頁面，頁面不刷新的解決辦法
vue、 vue-router@4 記錄一下最近遇到的vue路由頁面間的跳轉(zhuǎn)的問題，其中就涉及到了不同路由的跳轉(zhuǎn)（/a/b1 = /a/b2）、相同路由不同參數(shù)間的跳轉(zhuǎn)（/a/b?c=1 = /a/b?c=2）、相同頁面錨點跳轉(zhuǎn)（/a/b#id1 =/a/b#id2）原因：渲染的是同一組件解決：可以在不刷新的頁面通過監(jiān)聽route,重新加載
2024年02月04日
瀏覽(22)
React Router 中的路由導(dǎo)航方法：push() 和 replace() 詳解
在 React Router 中， this.props.history.push() 和 this.props.history.replace() 是用于編程式導(dǎo)航的兩個常用方法。它們允許我們在組件中動態(tài)地更改路由，并可選地傳遞狀態(tài)參數(shù)。本文將介紹這兩個方法的用法和區(qū)別。 push() 方法將在導(dǎo)航時創(chuàng)建一個新的歷史記錄條目，并將用戶重定向到新
2024年03月15日
瀏覽(28)
【React Router 6 快速上手一】重定向Navigate / useRoutes路由表 / 嵌套路由Outlet
前言博主主頁????蠟筆雛田學(xué)代碼專欄鏈接????React專欄之前學(xué)習(xí)了react-router-dom5版本的相關(guān)內(nèi)容參考文章????React路由（詳解版）和路由的模糊匹配，重定向以及嵌套路由今天來學(xué)習(xí)react-router-dom6版本的相關(guān)知識！感興趣的小伙伴一起來看看吧~?? React Router 以三個不
2024年02月02日
瀏覽(22)
【Vue3/Vue2】判斷設(shè)備是移動端還是pc端跳轉(zhuǎn)不同路由router
? ? ? APP文件中寫入js代碼 1、首先，通過 isMobile() 函數(shù)判斷用戶的設(shè)備類型。該函數(shù)使用正則表達(dá)式匹配 navigator.userAgent 字符串，以確定用戶是在移動設(shè)備上訪問網(wǎng)頁還是在桌面設(shè)備上訪問網(wǎng)頁 2、然后，在 onMounted() 鉤子函數(shù)中，根據(jù)當(dāng)前的路由路徑來判斷是否需要進(jìn)行重定
2024年01月16日
瀏覽(43)

<rt id="x94gc"><video id="x94gc"></video></rt>

<nobr id="x94gc"><th id="x94gc"></th></nobr>

<dfn id="x94gc"><video id="x94gc"></video></dfn>

<dfn id="x94gc"><kbd id="x94gc"><sup id="x94gc"></sup></kbd></dfn>

<small id="x94gc"><samp id="x94gc"><output id="x94gc"></output></samp></small>