1. Toy模板网首页
  2. > Toy博客

react 11之 router6路由 （两种路由模式、两种路由跳转、两种传参与接收参数、嵌套路由，layout组件、路由懒加载）

9月前 作者：小小亮01 分类：Toy博客 阅读(45) 违法举报

这篇具有很好参考价值的文章主要介绍了react 11之 router6路由 （两种路由模式、两种路由跳转、两种传参与接收参数、嵌套路由，layout组件、路由懒加载）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

react路由1：安装和两种模式

  • npm i react-router-dom
  • 两种模式
    • Router：所有路由组件的根组件，包裹路由的最外层容器
    • Link：跳转路由组件
    • Routes ：用于定义和渲染路由规则( 用于替换 Switch 组件)
    • Route：路由规则匹配组件，显示当前规则对应的组件
      • exact => 精确匹配，只有当 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：两种路由跳转 （ 命令式与编程式）

2-1 路由跳转-命令式

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 路由跳转-编程式 - 函数组件

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路由 （两种路由模式、两种路由跳转、两种传参与接收参数、嵌套路由，layout组件、路由懒加载）,react.js,javascript,ecmascript

react路由3：函数式组件-编程式导航传递参数

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/>} />
        {/* 精确匹配：只有当 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参数数据，拼接再url中=> /about?name=homeName ； 02:传递state=> 自定义数据
    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();
  // 当前about页面 接受 home页面传递的参数
  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 组件实现重定向 ， 匹配到 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/>} />
        {/* 精确匹配：只有当 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 ,// 精准匹配
      },
      {
        path: 'test',
        element: <Test/>,
        exact:true // 精准匹配
      }
    ]
  },
  {
    path: 'form',
    element: <Form/>,
    // exact:true ,// 精准匹配
    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:'关于',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路由 （两种路由模式、两种路由跳转、两种传参与接收参数、嵌套路由，layout组件、路由懒加载）,react.js,javascript,ecmascript文章来源地址https://www.toymoban.com/news/detail-662000.html

到了这里，关于react 11之 router6路由 （两种路由模式、两种路由跳转、两种传参与接收参数、嵌套路由，layout组件、路由懒加载）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • React-路由 react-router-dom

    前端路由的功能：让用户从一个页面跳转到另一个页面。 前端路由是一套映射规则 ，在 React 中， 是 URL 路径与组件的对应关系 。 使用 React 路由简单来说就是配置 路径与组件（配对） 。 路由的本质: 一个路径 path 对应唯一的一个组件 component 当我们访问一个 path 自动把 p

    2024年02月02日
    浏览(43)
  • React 路由react-router-dom详解

    React 路由react-router-dom详解

    前面我们先了解一下 路由是什么？ 路由分类有哪些？内置API有哪些 ？ 可能有点枯燥，不喜欢看的直接跳过 ！ 单页Web应用（single page web application，SPA）。 整个应用只有一个完整的页面。 点击页面中的链接不会刷新页面，只会做页面的局部更新。 数据都需要通过ajax请求获取

    2023年04月11日
    浏览(42)

  • vue3中使用router路由实现跳转传参

    大家好，今天和大家分享一下vue3中如何进行跳转并进行传参。 vue3取消了vue2部分api，所以路由跳转和传值的方式会有所不同。 我们今天主要讲router.push(location, onComplete?, onAbort?) vue3中新增API：useRouter和useRoute 1.首先在需要跳转的页面引入API—useRouter 2.在跳转页面定义router变量

    2023年04月09日
    浏览(42)
  • 探索React Router:实现动态二级路由

    探索React Router:实现动态二级路由

    我有一个路由配置的二维数组，想根据这个数组结合路由组件来动态生成路由，应该怎么样实现。在 React Router 6 中渲染二级路由的方式跟 React Router 65相比有一些变化,但核心思路仍然是利用 Route 组件和路由嵌套的方式。下面是具体的步骤: 定义路由数组 注意，这里我们使用

    2024年04月25日
    浏览(30)
  • React-Router路由基础篇（简单易学）

    React-Router路由基础篇（简单易学）

    文章目录 系列文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 （

    2024年04月14日
    浏览(43)
  • React07-路由管理器react-router-dom（v6）

    React07-路由管理器react-router-dom（v6）

    react-router 是一个流行的用于 React 应用程序路由的库。它使我们能够轻松定义应用程序的路由，并将它们映射到特定的组件，这样可以很容易地创建复杂的单页面应用，并管理应用程序的不同视图。 react-router 是基于 React 构建的，因此与其他 React 库和工具集成得很好。它在许

    2024年02月02日
    浏览(42)

  • vue通过router地址传参跳转同一路由页面，页面不刷新的解决办法

    vue、 vue-router@4 记录一下最近遇到的vue路由页面间的跳转的问题，其中就涉及到了不同路由的跳转（/a/b1 = /a/b2）、相同路由不同参数间的跳转（/a/b?c=1 = /a/b?c=2）、相同页面锚点跳转（/a/b#id1 =/a/b#id2） 原因：渲染的是同一组件 解决：可以在不刷新的页面通过监听route,重新加载

    2024年02月04日
    浏览(61)

  • React Router 中的路由导航方法：push() 和 replace() 详解

    在 React Router 中， this.props.history.push() 和 this.props.history.replace() 是用于编程式导航的两个常用方法。它们允许我们在组件中动态地更改路由，并可选地传递状态参数。本文将介绍这两个方法的用法和区别。 push() 方法将在导航时创建一个新的历史记录条目，并将用户重定向到新

    2024年03月15日
    浏览(47)
  • 【React Router 6 快速上手一】重定向Navigate / useRoutes路由表 / 嵌套路由Outlet

    【React Router 6 快速上手一】重定向Navigate / useRoutes路由表 / 嵌套路由Outlet

    前言 博主主页👉🏻蜡笔雏田学代码 专栏链接👉🏻React专栏 之前学习了react-router-dom5版本的相关内容 参考文章👉🏻React路由（详解版）和 路由的模糊匹配，重定向以及嵌套路由 今天来学习react-router-dom6版本的相关知识！ 感兴趣的小伙伴一起来看看吧~🤞 React Router 以三个不

    2024年02月02日
    浏览(48)
  • 【Vue3/Vue2】判断设备是移动端还是pc端跳转不同路由router

    【Vue3/Vue2】判断设备是移动端还是pc端跳转不同路由router

          APP文件中写入js代码 1、首先，通过 isMobile() 函数判断用户的设备类型。该函数使用正则表达式匹配 navigator.userAgent 字符串，以确定用户是在移动设备上访问网页还是在桌面设备上访问网页 2、然后，在 onMounted() 钩子函数中，根据当前的路由路径来判断是否需要进行重定

    2024年01月16日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包