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;

这时候就可以到浏览器中看一下效果了,如果一切正常,就可以实现页面跳转。

React Router 安装与环境搭建

但这只是最简单的页面跳转,第一篇内容我们先学这么多,后续文章更精彩。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P01: React Router 安装与环境搭建

发表评论

提供最优质的资源集合

立即查看 了解详情