启用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. 3.0 熟悉IDAPro静态反汇编器

    IDA Pro 是一种功能强大且灵活的反汇编工具,可以在许多领域中发挥作用,例如漏洞研究.逆向工程.安全审计和软件开发等,被许多安全专家和软件开发者用于逆向工程和分析二进制代码.它支持大量的二进制文件 ...

  2. 21.7 Python 使用Request库

    Request库可以用来发送各种HTTP请求,该框架的特点是简单易用,同时支持同步和异步请求,支持HTTP协议的各种方法和重定向.它还支持Cookie.HTTPS和认证等特性. Request库的使用 ...

  3. 分布式压测之locust和Jmeter的使用

    受限于单台机器的配置问题,我们在单台机器上达不到一个很高的压测并发数,那这个时候就需要引入分布式压测 分布式压测原理: 一般通过局域网把不同测试计算机链接到一起,达到测试共享.分散操作.集中管理的目的 ...

  4. 多进程实现socket通信(Python)

    服务器端: #__author__:Kelvin #date:2020/5/9 11:35 import socket from multiprocessing import Process def ...

  5. centos7.9重启网卡提示Failed to start LSB: Bring up/down networking.

    前几天给一台机器状态centos7.9系统,设备有2个网口,今天重启网卡一直失败, 查看network状态,怀疑是eth0网卡有问题 查看eth0的网卡配置,发现是eth0网卡的BOOTPROTO=d ...

  6. Python初学(请大神多多指教)

    python的注释单行注释用#号多行注释用'''  '''注释 基本数据类型 字符串--   n1 = "alex"   n2 = 'root'       n3 = " ...

  7. (python)做题记录||2024.2.4||题目是codewars的【 All Balanced Parentheses】

    题目链接:https://www.codewars.com/kata/5426d7a2c2c7784365000783/python 我的解决方案: def balanced_parens(n): # ...

  8. [转载自jayant97] 详解Zephyr设备树(DeviceTree)与驱动模型

    原文链接:详解Zephyr设备树(DeviceTree)与驱动模型 1. 前言 ​ Nordic最新的开发包NCS(nRF Connect SDK)相对于原来的nRF5 SDK来说,最大的更新莫过于采 ...

  9. ABC 304

    T4 在一个平面上有一块面积无限的蛋糕,给出 \(n\) 颗草莓的所在位置和 \(a\,(b)\) 条平行与 \(x\,(y)\) 轴的切刀位置. 切刀会把蛋糕沿 \(x\,(y)\) 轴切开.因此一 ...

  10. 轻松玩转makefile | 函数的使用

    前言 在上一篇文章中,尽管使用了变量和模式,但还是有不够好的地方,在Makefile中要指明每一个源文件,我们接下来利用函数对其进行优化,并介绍其他常用的一些函数. 依旧是以fun.c ,main.c ...