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(,document.getElementById('root'))

现在的AppRouter组件是没有的，我们可以在src目录下建立一个AppRouter.js文件，然后写入下面的代码。

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

function Index() {
  return Home welcome willem;
}

function List() {
  return List-Page;
}

function AppRouter() {
  return (
    
        
             首页 
            列表 
        
        
        
    
  );
}
export default AppRouter;

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

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