React+typescript配置路由

是React项目就用.js后缀名创建文件,是React+Typescript项目就用.ts结尾创建文件

1.创建一个react-typescript的项目,有项目的话可以直接进行配置

create-react-app ts3 --template typescript

2.安装配置路由需要的依赖

npm install [email protected] -D
npm install react-router-config -D 
npm i @types/[email protected] -D
npm i @types/react-router-config -D

3.在src的index.js或index.tsx中引入  

import {HashRouter as Router} from 'react-router-dom'

4.把src目录下的index.js或index.tsx中的React.StrictMode替换为Router

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,这里提供一个简单的实现思: 1. 在 A 页面中,将需要保持的状态和数据存储在 localStorage 中。 2. 在 A 页面组件中,使用 useEffect 钩子函数监听由变化,当离开 A 页面时,将数据存储到 localStorage 中。 3. 在 A 页面组件中,使用 useEffect 钩子函数监听组件挂载时,从 localStorage 中读取数据,如果存在则使用这些数据来初始化组件状态。 以下是一个简单的实现代码: ```typescript import React, { useEffect, useState } from 'react'; interface APageState { // 定义 A 页面需要保存的数据类型 } const APage: React.FC = () => { const [state, setState] = useState<APageState>({}); // 从 localStorage 中读取数据并初始化组件状态 useEffect(() => { const dataStr = localStorage.getItem('APageData'); if (dataStr) { setState(JSON.parse(dataStr)); } }, []); // 监听由变化,当离开 A 页面时,将数据存储到 localStorage 中 useEffect(() => { const handleBeforeUnload = () => { localStorage.setItem('APageData', JSON.stringify(state)); }; window.addEventListener('beforeunload', handleBeforeUnload); return () => { window.removeEventListener('beforeunload', handleBeforeUnload); }; }, [state]); // 渲染 A 页面组件 return <div>APage</div>; }; export default APage; ``` 需要注意的是,这种实现方式只适用于在同一浏览器中的页面切换。如果用户在不同浏览器或不同设备上访问 A 页面,将无法保持原来的状态和数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值