启用reactRouter，让Navigator支持多页面

启用reactRouter，让Navigator支持多页面

当前系统就一个页面，感觉是时候让她晋级到多页面程序了。

网上此类教程，我只记录我需要的最小范围。

0.目标

整站由原来的一个页面，变成2个页面 首页和 /English 两个页面

1.安装reactRouter

这里默认安装都是cnpm，除非装不上再换npm

cnpm install react-router-dom --save-dev

2.配置代码 RouterIndex.js

import React from 'react';
import WrapNavigator from './Navigator'
import English from './English'

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

function RouterIndex () {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={WrapNavigator}></Route>
        <Route path="/English" component={English}></Route>
      </Switch>
    </Router>
  )
}

export default RouterIndex

注意 path="/" 后面要加上 exact，这样就是两个单独的页面了，要不会进行向下匹配

3.添加链接可以进行页面跳转

有 组件，但是暂时不用，Navigator里面先用默认的a，弹出跳转先用着就好了

遇到问题：由于引入了ReactRouter，线上的地址和本地地址路径不一样

开发地址：http://192.168.40.54:3000/

线上地址：http://pengchenggang.gitee.io/navigator/

线上地址目录是 /navigator 而本地地址是 / 所有又出现了根目录地址不统一问题。

正统应该查询 react process.env.NODE_ENV 设置根目录

<Router basename="/navigator">
<Link to="/tomorrow"/> 这个没用在导航上

添加404.html文件，要不BrowserRouter不能用，只能用hash了

附录

reactRouter官方文档

https://reactrouter.com/web/guides/quick-start