使用 React Router v6 进行布局-js教程-PHP中文网

使用 React Router v6 进行布局

WBOY

发布： 2024-08-23 13:15:36

转载

1169人浏览过

使用 react router v6 进行布局

第 1 步：设置 react router v6

npm i -d react-router-dom@latest

登录后复制

第2步：定义路由结构

接下来，在 app.js 文件中定义路由的结构。我们将为主页、关于页面和联系页面创建路由，并将它们与相应的组件关联起来。

// app.js
import react from 'react';
import { browserrouter as router, routes, route } from 'react-router-dom';
import layout from './layout';
import home from './home';
import about from './about';
import contact from './contact';

function app() {
  return (
    <router>
      <routes>
        <route path="/" element={<layout />}>
          <route index element={<home />} />
          <route path="/about" element={<about />} />
          <route path="/contact" element={<contact />} />
        </route>
      </routes>
    </router>
  );
}

export default app;

登录后复制

第三步：创建布局组件

现在，让我们创建一个布局组件（layout.js），它将包含我们的共享标题和主要内容区域。

// layout.js
import react from 'react';
import { outlet } from 'react-router-dom';

function layout() {
  return (
    <div>
      <header>
        <h1>my app</h1>
        <nav>
          <ul>
            <li><a href="/">home</a></li>
            <li><a href="/about">about</a></li>
            <li><a href="/contact">contact</a></li>
          </ul>
        </nav>
      </header>
      <main>
        <outlet />
      </main>
    </div>
  );
}

export default layout;

登录后复制

第四步：创建页面组件

为主页、关于页面和联系页面创建单独的组件。这些组件将代表每个页面的内容。

家居组件

// home.js
import react from 'react';

function home() {
  return (
    <div>
      <h2>home page</h2>
      <p>welcome to the home page!</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/10725">
                            <img src="https://img.php.cn/upload/webcode/000/000/011/176345460980269.png" alt="南方数据企业网站管理系统11 bulid 080901 全屏修正版">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/10725">南方数据企业网站管理系统11 bulid 080901 全屏修正版</a>
                            <p>南方数据企业网站管理系统 V11.0全屏版新增功能:1.首页模板布局做了全新的调整;2.新增了企业网站广告管理系统,可以在后台随意增加和修改Banner广告、对联广告、浮动广告、弹出广告;3.新增了QQ在线资讯功能，同时还有N种模板选择;4.更换了网站统计管理系统；5.对菜单进行了加粗处理,显得更美观;6.后台使用了全新的静态编辑器,提高了后台打开编辑器的速度;7.新增了一个模板;8.修改了中英文</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="南方数据企业网站管理系统11 bulid 080901 全屏修正版">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/10725" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="南方数据企业网站管理系统11 bulid 080901 全屏修正版">
                        </a>
                    </div>
                
    </div>
  );
}

export default home;

登录后复制

关于组件

// about.js
import react from 'react';

function about() {
  return (
    <div>
      <h2>about page</h2>
      <p>learn more about us!</p>
    </div>
  );
}

export default about;

登录后复制

接触元件

// Contact.js
import React from 'react';

function Contact() {
  return (
    <div>
      <h2>Contact Page</h2>
      <p>Reach out to us!</p>
    </div>
  );
}

export default Contact;

登录后复制