P01: React Router 安装与环境搭建
Posted wgchen~
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了P01: React Router 安装与环境搭建相关的知识,希望对你有一定的参考价值。
简介
本文带大家安装一下React Router 学习开发的基础环境,并通过做一个最简单的例子让大家熟悉React Router。
用 creact-react-app 脚手架初始化项目
如果你没有安装脚手架工具,你需要安装一下:
npm install -g create-react-app
直接使用脚手架工具创建项目
D: 进入D盘
mkdir ReactRouterDemo 创建ReactRouterDemo文件夹
cd ReactRouterDemo 进入文件夹
create-react-app demo01 用脚手架创建React项目
cd demo01 等项目创建完成后,进入项目目录
npm start 预览项目
这样项目就制作好了,我们删除一下没用的文件,让代码结构保持最小化。删除 src
里边的所有文件,只留一个 index.js
,并且 index.js 文件里也都清空。
使用npm安装React Router
打开终端,进入demo01,在终端中用npm直接安装React Router。
npm install --save react-router-dom@5.2.0
安装完成后可以到 package.json
里看一下安装的版本,我目前安装的是5.2.0,你学习的时候版本可能不一样,也许有些API不适用,你可以在入门后自己到官网查看API学习。
编写一个最简单的路由程序
首先我们改写 src
文件目录下的 index.js
代码。
import React from 'react';
import ReactDOM from 'react-dom'
import AppRouter from './AppRouter'
ReactDOM.render(<AppRouter/>,document.getElementById('root'))
现在的AppRouter组件是没有的,我们可以在src
目录下建立一个AppRouter.js
文件,然后写入下面的代码。
import React from "react";
import BrowserRouter as Router, Route, Link from "react-router-dom";
function Index()
return <h2>Home welcome willem</h2>;
function List()
return <h2>List-Page</h2>;
function AppRouter()
return (
<Router>
<ul>
<li> <Link to="/">首页</Link> </li>
<li><Link to="/list/">列表</Link> </li>
</ul>
<Route path="/" exact component=Index />
<Route path="/list/" component=List />
</Router>
);
export default AppRouter;
这时候就可以到浏览器中看一下效果了,如果一切正常,就可以实现页面跳转。
但这只是最简单的页面跳转,第一篇内容我们先学这么多,后续文章更精彩。
以上是关于P01: React Router 安装与环境搭建的主要内容,如果未能解决你的问题,请参考以下文章
Vite 2.x + React + Zarm + Less + React Router v6 + Axios + flexible.js 搭建前端 H5 开发环境
React第六篇: 搭建React + Router + antd + nodejs + express框架搭建(nodejs做前后端server)