搭建一个简单的react router工程

news/2024/12/29 7:34:45/

1.创建一个新的 React 工程:可以使用 create-react-app 脚手架工具来快速创建一个新的项目,命令行输入 npx create-react-app my-app 即可创建一个名为 my-app 的新项目。

2.安装 react-router-dom 库:在命令行中运行 npm install react-router-dom 或者 yarn add react-router-dom 来安装该库。

3.在 App.js 文件中引入 react-router-dom 库,并在需要路由的组件外层包裹 <BrowserRouter> 组件。例如:

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </BrowserRouter>
  );
}

export default App;
 

4.在 components 目录下创建 Home.js 和 About.js 文件,并编写对应的组件代码。例如:

Home.js:

import React from 'react';

function Home() {
  return (
    <div>
      <h1>Home</h1>
      <p>Welcome to the home page!</p>
    </div>
  );
}

export default Home;
 

About.js:

import React from 'react';

function About() {
  return (
    <div>
      <h1>About</h1>
      <p>This is the about page.</p>
    </div>
  );
}

export default About;
 

5.在命令行中运行 npm start 或者 yarn start 启动应用程序,并在浏览器中访问 http://localhost:3000/ 和 http://localhost:3000/about 来查看路由的效果。

这样就可以快速搭建一个简单的 React Router 工程了

 


http://www.ppmy.cn/news/50556.html

相关文章

Adobe国际认证证书有用吗?

Adobe国际认证又称为Adobe认证(英文:Adobe Certified Professional)是Adobe公司CEO签发的权威国际认证体系,旨在为用户提供Adobe软件的专业认证。 该体系基于Adobe核心技术及岗位实际应用操作能力的测评体系得到国际ISTE协会的认可&#xff0c;并在全球 148 各国家推广&#x…

Opencv+Python笔记(四)图像的形态学处理

1.腐蚀与膨胀 膨胀用来处理缺陷问题&#xff0c;把缺陷填补掉&#xff0c;提高亮区面积&#xff1b; 腐蚀用来处理毛刺问题&#xff0c;把毛刺腐蚀掉&#xff0c;降低亮区面积。 腐蚀操作可以消除噪点&#xff0c;同时消除部分边界值&#xff0c;导致目标图像整体缩小。 膨胀…

【具体到每一步】从0制作一个uniapp的新闻类页面(界面篇)

目录 项目初始化 / 基础配置 项目创建 配置路由/页面/tabbar pages.json配置tabbar 配置图标/静态资源 导航栏和字体颜色 scroll-view实现横向滚动条样式 公共模块定义components组件 新建组件 使用组件 组件里的结构 布局个人中心页面 组件差异化处理 数据传递 导航…

成基于时间轮实现的定时器解决方案

文章目录 定时器的使用场景定时器与其他组件的关系定时器与网络事件在一个线程定时器与网络事件在不同线程当中处理大量定时任务怎么处理 定时器设计接口设计数据结构的抉择 时间轮时间轮的概念设计单层级时间轮1、时间轮大小2、时间精度 空推进问题多层时间轮 Skynet定时器实现…

vim small trick

一下配置都是在IDEA环境下运行的 R和E可以在IDEA窗口间切换如何交换两行 ddp跳到某一行 {number}Gcw 删除某词并切换到插入模式f{character} find 后面的第一个character&#xff0c;; 重复查找上次 f{char} 搜到的字符&#xff0c;, 可以往回重复查找F{character} Forword 找到…

PICO一方打造:VR音游《闪韵灵境》体验

​《闪韵灵境》本周正式上线&#xff0c;作为PICO一方工作室的首款作品&#xff0c;不少玩家对此寄予厚望。即便是作为一个轻轻度VR音游的用户&#xff0c;经过简短体验&#xff0c;我也发现了闪韵灵境和目前热门的Beat Saber之间的一些差异点。以下是我在简短体验后的一些看法…

本地缓存解决方案Caffeine | Spring Cloud 38

一、Caffeine简介 Caffeine是一款高性能、最优缓存库。Caffeine是受Google guava启发的本地缓存&#xff08;青出于蓝而胜于蓝&#xff09;&#xff0c;在Cafeine的改进设计中借鉴了 Guava 缓存和 ConcurrentLinkedHashMap&#xff0c;Guava缓存可以参考上篇&#xff1a;本地缓…

PowerShell install go+caddy+filebrowser+nssm 实现部署文件系统

filebrowser filebrowser 是一个使用go语言编写的软件&#xff0c;功能是可以通过浏览器对服务器上的文件进行管理。可以是修改文件&#xff0c;或者是添加删除文件&#xff0c;甚至可以分享文件&#xff0c;是一个很棒的文件管理器&#xff0c;你甚至可以当成一个网盘来使用。…