从零搭建react16开发环境（四）——路由

安装Router

命令行输入并执行：npm install react-router react-router-dom --save
react-router: 路由的核心功能
react-router-dom:依赖react-router，加入了支持DOM的组件，例如（渲染出标签）和（与浏览器的window.history交互）

目录结构修改

在src目录下新建pages文件夹，用于存放页面入口文件；新建conponents文件夹，用于存放组件相关入口文件。
pages文件夹下新建home、page1、page2、router文件夹，分别在四个文件夹中新建index.js。

在home、page1、page2中写入 页面内容
home.js

import React from "react";
export default class Home extends React.Component {
    render() {
        return (
            
这是主页面
        )
    }
}

在router中写入路由配置

import React from 'react'
import {
    HashRouter as Router,
    Route,
    Link,
    Switch
} from 'react-router-dom';
import Home from '../home';
import Page1 from '../page1';
import Page2 from '../page2';

export default class IRouter extends React.Component {
    render() {
        return (
            
                

                    主页面 
                    页面1 
                    页面2 

                    
                        < Route exact path="/" component={Home} />
                        < Route path="/page1" component={Page1} />
                        < Route path="/page2" component={Page2} />
                    
                
            
        );
    }
}

修改src/index.js修改根组件，引入路由配置

import React from "react";
import ReactDom from "react-dom";
import './index.less';
import IRouter from './pages/router';


ReactDom.render(
    ,
    document.getElementById("root")
);

运行npm run dev启动应用，

image.png

image.png

如上图可正常切换路由即配置成功。