启用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
启用reactRouter,让Navigator支持多页面的更多相关文章
- 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 ...
- 支持微信页面右侧悬浮QQ在线客服
使用方法: 1.将style里的css样式复制到你的样式表中 2.将body中的代码部分拷贝到你需要的地方即可 (js.图片采用绝对路径,不建议修改) <!DOCTYPE html PUBLIC ...
- React-Router browserHistory浏览器刷新出现页面404解决方案
在React项目中我们经常需要采用React-Router来配置我们的页面路由,React-Router 是建立在 history 之上的,常见的history路由方案有三种形式,分别是: 1.has ...
- Equinox OSGi服务器应用程序的配置步骤 (支持JSP页面)
本文介绍在Eclipse里如何配置一个简单的基于Eclipse Equinox OSGi实现的Web应用程序,在它的基础上可以构造更加复杂的应用,本文使用的是Eclipse 3.3.1版本,如果你的E ...
- iOS 6.0之后支持一个页面横屏的方法
拿两个页面举例子: 0.开启旋转: 1.第一个界面实现以下方法 /** * 默认显示的方向,preferredInterfaceOrientationForPresentation必须返回一个支持的接 ...
- Duilib中Webbrowser事件完善使其支持判断页面加载完毕
在多iframe的页面中,需要结合DISPID_DOCUMENTCOMPLETE和DISPID_NAVIGATECOMPLETE2两个事件判断页面是否加载完毕,而duilib中没有提供对DISPID_ ...
- react-router路由地址变了页面却没有跳转的解决办法
最近,自己在摸索react的时候,遇到一个很奇葩的问题,大概是这样的: 我从列表页使用Link跳转到详情页面,列表页面的路由是'/list',详情页面的路由是'/list/detail',由于详情页面 ...
- react-router url参数更新 但是页面不更新的解决办法
今天发现, 当使用react-router(v4.2.2)时,路由需要传入参数, 但是如果路由跳转时,url仅仅改变的是参数部分,如从hello/1跳转到hello/2,此时虽然参数更新了,但是页面是 ...
- 用jQuery File Upload做的上传控件demo,支持同页面多个上传按钮
需求 有这么一个需求,一个form有多个文件要上传,但又不是传统的图片批量上传那种,是类似下图这种需求,一开始是用的swfupload做的上传,但是问题是如果有多个按钮的话,就要写很多重复的代码,于为 ...
- CI 笔记 datagrid的调用,不支持多页面多次调用js
在导航列表中,调用datagrid时,如果用js加载datagrid时,不知为何,报“404错误”找不到网页, 用datagrid时,用网页的形式调用,则没有问题. ----------------- ...
随机推荐
- 3.0 熟悉IDAPro静态反汇编器
IDA Pro 是一种功能强大且灵活的反汇编工具,可以在许多领域中发挥作用,例如漏洞研究.逆向工程.安全审计和软件开发等,被许多安全专家和软件开发者用于逆向工程和分析二进制代码.它支持大量的二进制文件 ...
- 21.7 Python 使用Request库
Request库可以用来发送各种HTTP请求,该框架的特点是简单易用,同时支持同步和异步请求,支持HTTP协议的各种方法和重定向.它还支持Cookie.HTTPS和认证等特性. Request库的使用 ...
- 分布式压测之locust和Jmeter的使用
受限于单台机器的配置问题,我们在单台机器上达不到一个很高的压测并发数,那这个时候就需要引入分布式压测 分布式压测原理: 一般通过局域网把不同测试计算机链接到一起,达到测试共享.分散操作.集中管理的目的 ...
- 多进程实现socket通信(Python)
服务器端: #__author__:Kelvin #date:2020/5/9 11:35 import socket from multiprocessing import Process def ...
- centos7.9重启网卡提示Failed to start LSB: Bring up/down networking.
前几天给一台机器状态centos7.9系统,设备有2个网口,今天重启网卡一直失败, 查看network状态,怀疑是eth0网卡有问题 查看eth0的网卡配置,发现是eth0网卡的BOOTPROTO=d ...
- Python初学(请大神多多指教)
python的注释单行注释用#号多行注释用''' '''注释 基本数据类型 字符串-- n1 = "alex" n2 = 'root' n3 = " ...
- (python)做题记录||2024.2.4||题目是codewars的【 All Balanced Parentheses】
题目链接:https://www.codewars.com/kata/5426d7a2c2c7784365000783/python 我的解决方案: def balanced_parens(n): # ...
- [转载自jayant97] 详解Zephyr设备树(DeviceTree)与驱动模型
原文链接:详解Zephyr设备树(DeviceTree)与驱动模型 1. 前言 Nordic最新的开发包NCS(nRF Connect SDK)相对于原来的nRF5 SDK来说,最大的更新莫过于采 ...
- ABC 304
T4 在一个平面上有一块面积无限的蛋糕,给出 \(n\) 颗草莓的所在位置和 \(a\,(b)\) 条平行与 \(x\,(y)\) 轴的切刀位置. 切刀会把蛋糕沿 \(x\,(y)\) 轴切开.因此一 ...
- 轻松玩转makefile | 函数的使用
前言 在上一篇文章中,尽管使用了变量和模式,但还是有不够好的地方,在Makefile中要指明每一个源文件,我们接下来利用函数对其进行优化,并介绍其他常用的一些函数. 依旧是以fun.c ,main.c ...