第 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 (
    
      
        }>
          } />
          } />
          } />
        
      
    
  );
}

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!

							

								
								

									html5全屏可拖拽的横向图片布局
									
html5基于TweenMax来制作拖拽图片预览动画特效。拖拽效果使用的是Draggabilly插件。这是一款html5和CSS3可拖拽的横向图片预览布局。该布局将所有图片在屏幕中央进行横向排布，可以通过鼠标前后拖拽图片。当点击图片的标号数字时，隐藏所有的缩略图，在屏幕上显示当前被点击的图片放大，文本内容展示效果。
								
								下载 
							
						
    
  );
}

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;

结论

恭喜！您已经使用 react router v6 成功构建了布局，允许您在不同页面之间导航，同时在整个应用程序中保持一致的布局。这种方法为具有多个路由的 react 应用程序提供了一个干净且有组织的结构。尝试添加更多路由和组件以进一步增强您的应用程序！