启用reactRouter，让Navigator支持多页面-CFANZ编程社区

启用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

---------------------------------------------
生活的意义并不是与他人争高下，而在于享受努力实现目标的过程，结果是对自己行动的嘉奖。
↑面的话，越看越不痛快，应该这么说：

生活的意义就是你自己知道你要做什么，明确目标。没有目标，后面都是瞎扯！

新博客 https://www.VuejsDev.com 用于梳理知识点

0 条评论