013 react.js路由-尊龙官方平台

013 react.js路由-browserrouter模式

el/2024/3/25 17:29:19

路由是根据uri的不同来切换对应的组件,实现spa(单页面应用),在页面切换的时候不会刷新,更加接近原生体验。

先来安装路由的组件,下载哪个都行

npm i --save react-router-dom	#功能更全
npm i --save react-router		#适合线上环境

路由有两种模式

hashrouter hash模式,url里带#号,刷新的时候页面不会丢失

browserrouter 历史记录模式,url里没有#号,通过历史记录api进行路由切换,刷新会丢失

 

在index.js里引用browserroute模式路由

import react from 'react';
import reactdom from 'react-dom';
import './index.css';
import app from './app';
import * as serviceworker from './serviceworker';
//使用browserrouter模式
import { browserrouter } from 'react-router-dom'
//将路由模式的标签作为跟标签
reactdom.render(,document.getelementbyid('root')
);
serviceworker.unregister();

在app.js里使用路由

import react from 'react';
import logo from './logo.svg';
import './app.css';
//引入route,使用路由
import { route } from 'react-router-dom'
import home from "./model/home"
import news from "./model/news"
import phone from "./model/phone"function app() {return (



); }export default app;

注意url:

 


http://www.ngui.cc/el/5127272.html

相关文章

015 路由的高阶组件-withrouter

什么是高阶组件(hoc): 入参是一个组件,同时返回的也是一个组件,这类组件被称为高阶组件 withrouter让不具备路由切换功能的组件,能够具有路由切换组件的三个属性 location、match、history withrouter监…

016 hock的使用

hock是react 16.7的新特新,可以让无状态组件能够使用状态,在react开发中状态的管理是必不可少的,以前为了进行状态管理,需要使用类组件或者redux等进行管理。 usestate是用来定义状态,他返回的是一个数组,第…

017 redux统一管理state

redux是js提供的一个可预测性的状态容器,集中度管理react中多个组件的状态。redux是专门的一个状态管理库,不是react独有的。 什么的可预测性:我们给一个固定的输入,那么必定可以得到一个结果 redux的适用场景: 1. …

shiro内置realm——jdbcrealm

jdbcrealm需要引入数据库驱动和数据源 mysqlmysql-connector-java8.0.14 com.alibaba

mysql group by被限制的问题

当我们编写查询sql使用group by,还查询了其他字段时,会提示group by限制的问题,如图所示: 错误代码: 1055 expression #2 of select list is not in group by clause and contains nonaggregated column qrcode.store_…

react 通过 require引入资源的坑

直接看代码和注释吧: getmodel path > {if (path undefined || path.length < 1) {return undefined;}/*** 这里一定要分开写,把/page/这种公共的路径,写成死字符串,否则无法正常获取到model。* 比如 /page/cont/projitem…

java使用atomicinteger来实现原子性自增

最近工作比较忙,没啥时间写笔记,丢一个老笔记上来吧。 先放出工具类代码: package com.example.demo;import java.util.concurrent.executorservice; import java.util.concurrent.executors; import java.util.concurrent.timeunit; impor…

bcrypt加密

bcrypt加密 org.mindrotjbcrypt0.4 public static void main(string[] args) throws ioexception, urisyntaxexception {string …

md5加密(编码)

md5加密(编码)做java的太熟悉了,直接丢工具类吧 package tool;import java.math.biginteger; import java.security.messagedigest;/*** md5加密的类* * author blacktv**/ public class getmd5 {/*** md5加密* * param password* return*/p…
网站地图