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

启用reactRouter,让Navigator支持多页面的更多相关文章

  1. nginx如何启用对HTTP2的支持 | nginx如何验证HTTP2是否已启用

    nginx启用HTTP2特性 查看当前nginx的编译选项 1 #./nginx -V 2   3 nginx version: nginx/1.9.15 4 built by gcc 5.4.0 2 ...

  2. 支持微信页面右侧悬浮QQ在线客服

    使用方法: 1.将style里的css样式复制到你的样式表中 2.将body中的代码部分拷贝到你需要的地方即可 (js.图片采用绝对路径,不建议修改) <!DOCTYPE html PUBLIC ...

  3. React-Router browserHistory浏览器刷新出现页面404解决方案

    在React项目中我们经常需要采用React-Router来配置我们的页面路由,React-Router 是建立在 history 之上的,常见的history路由方案有三种形式,分别是: 1.has ...

  4. Equinox OSGi服务器应用程序的配置步骤 (支持JSP页面)

    本文介绍在Eclipse里如何配置一个简单的基于Eclipse Equinox OSGi实现的Web应用程序,在它的基础上可以构造更加复杂的应用,本文使用的是Eclipse 3.3.1版本,如果你的E ...

  5. iOS 6.0之后支持一个页面横屏的方法

    拿两个页面举例子: 0.开启旋转: 1.第一个界面实现以下方法 /** * 默认显示的方向,preferredInterfaceOrientationForPresentation必须返回一个支持的接 ...

  6. Duilib中Webbrowser事件完善使其支持判断页面加载完毕

    在多iframe的页面中,需要结合DISPID_DOCUMENTCOMPLETE和DISPID_NAVIGATECOMPLETE2两个事件判断页面是否加载完毕,而duilib中没有提供对DISPID_ ...

  7. react-router路由地址变了页面却没有跳转的解决办法

    最近,自己在摸索react的时候,遇到一个很奇葩的问题,大概是这样的: 我从列表页使用Link跳转到详情页面,列表页面的路由是'/list',详情页面的路由是'/list/detail',由于详情页面 ...

  8. react-router url参数更新 但是页面不更新的解决办法

    今天发现, 当使用react-router(v4.2.2)时,路由需要传入参数, 但是如果路由跳转时,url仅仅改变的是参数部分,如从hello/1跳转到hello/2,此时虽然参数更新了,但是页面是 ...

  9. 用jQuery File Upload做的上传控件demo,支持同页面多个上传按钮

    需求 有这么一个需求,一个form有多个文件要上传,但又不是传统的图片批量上传那种,是类似下图这种需求,一开始是用的swfupload做的上传,但是问题是如果有多个按钮的话,就要写很多重复的代码,于为 ...

  10. CI 笔记 datagrid的调用,不支持多页面多次调用js

    在导航列表中,调用datagrid时,如果用js加载datagrid时,不知为何,报“404错误”找不到网页, 用datagrid时,用网页的形式调用,则没有问题. ----------------- ...

随机推荐

  1. 21.9 Python 使用Selenium库

    Selenium是一个自动化测试框架,主要用于Web应用程序的自动化测试.它可以模拟用户在浏览器中的操作,如打开网页.点击链接.填写表单等,并且可以在代码中实现条件判断.异常处理等功能.Seleniu ...

  2. 认识3D模型-GLTF文件

    GLTF文件格式 glTF的全称(Graphics Language Transmission Format)图形语言传输格式.是三维场景和模型的标准文件格式. glTF 核心是 JSON 文件,描述 ...

  3. 顶配涨至近2万 该买还是买!iPhone15正面曝光 与历代苹果手机对比边框爆窄

    从曝光的iPhone 15正面渲染图来看,其颜值确实要比上代又提高不少. 外媒放出了一组iPhone 15 Pro的正面渲染图照,从图片看边框非常的窄,与历代iPhone 边框对比,这个特点更是被放大 ...

  4. 数据分析(以kaggle上的加州房价为例)

    数据来源:House Prices - Advanced Regression Techniques 参考文献: Comprehensive data exploration with Python ...

  5. 小知识:Flex ASM特性对集群资源显示的影响

    有客户咨询,认为19c RAC集群资源状态和11g RAC大不一样,比如在他们的19c集群,也是只部署2节点,却显示3个资源状态,其中第三个还是offline状态,担心是否有影响. 实际上这和Flex ...

  6. 【Unity3D】固定管线着色器一

    1 前言 ​ 着色器(Shader)是渲染管线中最重要的一环,Unity3D 底层基于 OpenGL 实现,读者可以通过 渲染管线 了解 Unity3D 渲染流程. ​ OpenGL 1.x 为固定管 ...

  7. Spring源码之spring事务

    目录 Spring事务 事务自定义标签 自定义标签 解析标签 bean 的初始化 InfrastructureAdvisorAutoProxyCreator 获取增强方法 获取所有增强中内适用于当前方 ...

  8. 责任链模式与spring容器的搭配应用

    背景 有个需求,原先只涉及到一种A情况设备的筛选,每次筛选会经过多个流程,比如先a功能,a功能通过再筛选b功能,然后再筛选c功能,以此类推.现在新增了另外一种B情况的筛选,B情况同样需要A情况的筛选流 ...

  9. UtilMeta - 简洁高效的 Python 后端元框架

    最近开源了我开发多年的一个 Python 后端框架:UtilMeta 项目介绍 UtilMeta 是一个用于开发 API 服务的后端元框架,基于 Python 类型注解标准高效构建声明式接口与 ORM ...

  10. 2021-07-01 原生js获取文件数据

    原理 手动用js创建一个type为file的DOM元素. 在读取到数据后,清空手动创建的DOM元素.返回得到的Promise类型的文件数据files. const getFilesPromise = ...