使用 React Router v6 进行布局

npm i -d react-router-dom@latest

// app.jsimport 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.jsimport 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.jsimport react from 'react';function home() {  return (    <div>      <h2>home page</h2>      <p>welcome to the home page!</p>    </div>  );}export default home;

// about.jsimport react from 'react';function about() {  return (    <div>      <h2>about page</h2>      <p>learn more about us!</p>    </div>  );}export default about;

// Contact.jsimport React from 'react';function Contact() {  return (    <div>      <h2>Contact Page</h2>      <p>Reach out to us!</p>    </div>  );}export default Contact;