使用 React Router v6 进行布局

简介: 使用 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 (
}>
} />
} />
} />

  </routes></router>

);
}

export default app;

第三步:创建布局组件
现在,让我们创建一个布局组件(layout.js),它将包含我们的共享标题和主要内容区域。

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

function layout() {
return (


my app




);
}

export default layout;

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

家居组件
// home.js
import react from 'react';

function home() {
return (


home page


welcome to the home page!



);
}

export default home;
关于组件
// about.js
import react from 'react';

function about() {
return (


about page


learn more about us!



);
}

export default about;
接触元件
// Contact.js
import React from 'react';

function Contact() {
return (


Contact Page


Reach out to us!



);
}

export default Contact;

相关文章
|
20天前
|
前端开发
使用 React Router v6 进行布局
【8月更文挑战第27天】
27 1
|
18天前
|
移动开发 资源调度 前端开发
React Router V6 useRoutes的使用
【8月更文挑战第29天】 React Router V6 useRoutes的使用
31 3
|
16天前
|
前端开发 JavaScript UED
什么是 React Router?
【8月更文挑战第31天】
20 0
|
4月前
|
资源调度 前端开发 JavaScript
React Router:React应用的路由管理
【4月更文挑战第25天】React Router是React的官方路由库,用于管理SPA的路由。它基于组件,将URL映射到React组件,核心概念包括路由、链接和导航。设置路由时,在根组件中使用BrowserRouter或HashRouter,包裹Routes组件,定义Route规则。Link组件用于创建内部链接,实现导航。高级特性包括嵌套路由、参数化路由和编程式导航,如子路由、动态参数和JavaScript控制的导航。掌握React Router能帮助开发者更高效地构建复杂的React应用。
|
4月前
|
前端开发
探索React页面导航:不只有React Router
探索React页面导航:不只有React Router
|
4月前
|
前端开发 JavaScript API
React Router v6 完全指南(下)
React Router v6 完全指南(下)
160 0
|
4月前
|
存储 资源调度 前端开发
React Router v6 完全指南(上)
React Router v6 完全指南(上)
293 0
|
缓存 移动开发 前端开发
【React】react-router 路由详解
【React】react-router 路由详解
307 1
【React】react-router 路由详解
|
前端开发
【react 中router v6 与 v5 区别】
【react 中router v6 与 v5 区别】
|
前端开发 网络架构
【React】React-router路由
React-router路由
96 0