P01: React Router 安装与环境搭建

秒速五厘米 2023-10-06 20:58 17阅读 0赞

#### React Router ####

*  简介
 *  用 creact-react-app 脚手架初始化项目
 *  使用npm安装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学习。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]

## 编写一个最简单的路由程序 ##

首先我们改写 `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;

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

![在这里插入图片描述][4c85ad28f499404c81efa3a0e25d553d.gif_pic_center]  
但这只是最简单的页面跳转，第一篇内容我们先学这么多，后续文章更精彩。

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/38bf68cbf39d4140ad90f7aa40365e32.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[4c85ad28f499404c81efa3a0e25d553d.gif_pic_center]: https://img-blog.csdnimg.cn/4c85ad28f499404c81efa3a0e25d553d.gif#pic_center