亚洲视频二区_亚洲欧洲日本天天堂在线观看_日韩一区二区在线观看_中文字幕不卡一区

第 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="{&lt;layout"></route>}&gt;
          <route index element="{&lt;home"></route>} /&gt;
          <route path="/about" element="{&lt;about"></route>} /&gt;
          <route path="/contact" element="{&lt;contact"></route>} /&gt;
        
      </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></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>
  );
}

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;

登錄后復制

結論

恭喜！您已經使用 react router v6 成功構建了布局，允許您在不同頁面之間導航，同時在整個應用程序中保持一致的布局。這種方法為具有多個路由的 react 應用程序提供了一個干凈且有組織的結構。嘗試添加更多路由和組件以進一步增強您的應用程序！