P01: React Router 安装与环境搭建
目录
本文我们主要时带大家安装一下 React Router 学习开发的基础环境,并通过做一个最简单的例子让大家熟悉 React Router。
用 creact-react-app 脚手架初始化项目
如果你没有安装脚手架工具,你需要安装一下:
npm install -g create-react-app
如果你学了我前边的 react 文章课程,这一步一般都是完成的,可以省略掉。
直接使用脚手架工具创建项目
D: //进入 D 盘 mkdir ReactRouterDemo //创建 ReactRouterDemo 文件夹 cd ReactRouterDemo //进入文件夹 create-react-app demo01 //用脚手架创建 React 项目 cd demo01 //等项目创建完成后,进入项目目录 npm start //预览项目
这样项目就制作好了,我们删除一下没用的文件,让代码结构保持最小化。删除 SRC 里边的所有文件,只留一个index.js
,并且index.js
文件里也都清空。
使用 npm 安装 React Router
然后使用你顺手代码编辑工具中打开这个项目,我这里使用的是VSCode
。 打开终端,进入demo01
,在终端中用npm
直接安装React Router
。
npm install --save react-router-dom
安装完成后可以到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>mybj123.com</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 安装与环境搭建
码云笔记 » P01: React Router 安装与环境搭建