1. 获取 URL 参数，使用 RouteComponentProps 提示报错

import React, { useState } from 'react';
import { RouteComponentProps } from 'react-router-dom';
interface UrlParamType {
  id: string;
type DetailProps = RouteComponentProps<UrlParamType>;
const Detail: React.FC<DetailProps> = (props: DetailProps) => {
  const [urlParams, setUrlParams] = useState(props.location.query);
eslint 报错提示: 类型“Location<unknown>”上不存在属性“query”。ts(2339)
 
 
2. RouteComponentProps 使用方式
 
引入 RouteComponentProps 类型, 类组件和函数式组件
 
import { RouteComponentProps} from 'react-router-dom';
export interface DetailProps extends RouteComponentProps {
// 函数
interface UrlParamType {
  id: string;
type DetailProps = RouteComponentProps<UrlParamType>;
RouteComponentProps 中的定义
 
import * as H from 'history';
export interface RouteComponentProps<
    Params extends { [K in keyof Params]?: string } = {},
    C extends StaticContext = StaticContext,
    S = H.LocationState
    history: H.History<S>;
    location: H.Location<S>;
    match: match<Params>;
    staticContext?: C | undefined;
H.Location<S>中的定义没有 query
 
export interface Location<S = LocationState> {
    pathname: Pathname;
    search: Search;
    state: S;
    hash: Hash;
    key?: LocationKey | undefined;
如果要在 TS 和 eslint 的工程里使用 query， 需要扩展下 Location 类型
 
3. 扩展 Location 类型, 添加 query 属性类型
 
import { RouteComponentProps} from 'react-router-dom';
import H from 'history';
interface Location extends H.Location{
  query: {[key: string]: string};
export interface DetailProps extends RouteComponentProps {
  location: Location;
如果要指定具体的 URL 参数可以使用
 
import { RouteComponentProps} from 'react-router-dom';
import H from 'history';
// 指定 url 参数名
interface UrlParamType {
  id: string;
interface Location extends H.Location{
  query: UrlParamType;
export interface DetailProps extends RouteComponentProps {
  location: Location;
const Detail: React.FC<DetailProps> = (props: DetailProps) => {
  const [urlParams, setUrlParams] = useState(props.location.query);
4. 拓展学习
 
https://reactrouter.com/docs/en/v6/examples/custom-query-parsing
 
https://stackblitz.com/github/remix-run/react-router/tree/main/examples/search-params?file=src/App.tsx
 
https://stackblitz.com/github/remix-run/react-router/tree/main/examples/custom-query-parsing?file=src/App.tsx
 
https://github.com/remix-run/react-router/blob/main/docs/getting-started/tutorial.md
                    author: jayzhendate: 2022.04.211. 获取 URL 参数，使用 RouteComponentProps 提示报错import React, { useState } from 'react';import { RouteComponentProps } from 'react-router-dom';interface UrlParamType {  id: string;}type DetailProps = RouteComponentProps&l.
$route.query 一个 key/value 对象，表示 URL 查询参数。
$route.path 字符串，对应当前路由的路径
$route.fullPath 完成解析后的 URL，包含查询参数和 hash 的完整路径。
当浏览器刷新时，触发 导航守卫 beforeEach方法等，只有在 next(path: to.path) 时改变了路由参数
将 next(path: to.path) 修改为 next(path: to.fullPath)，这样就不会发生 
      path: '/edit',
      name: 'edit',
      component: () => import(/* webpackChunkName: "about" */ '@/views/User/Edit.vue')
				
在使用mybatis-generator-maven-plugin:generate的时候报了一个Unknown system variable 'query_cache_size'的错误。
错误的原因是数据库驱动不匹配导致的。
打开https://mvnrepository.com
搜索mysql-connector-java，找到MySQL Connector/J（JDBC Type ...
    errorTrapping!==  'none'&&
    globalThis.window!==  undefined&&
    globalThis.window.addEventListener!==  undefined)
    globalThis.window.addEventListener('error', (event)=>{
      event.preventDefault();
      // 'platform' and 'report' just log the reason.
      ourConsole.error(event.error);
      if( errorTrapping===  'exit'||  errorTrapping===  'abort') {
        globalThis.window.location.href=   `about:blank`;
[/code]
从代码上看不出，你实际操作的过程，可以试着重启浏览器或重新加载 mask
                【Selenium】解决 Error: LavaMoat 相关报错
                    蜗牛到大牛的路上: 
                    遇到下面的error 怎么办？ 
Error: no module registered for "2079" (number)
Context
background.html
Stack Trace
sentry-install.js:1 (e.<computed>)
sentry-install.js:76 (anonymous function)
runtime-lavamoat.js:7087 (anonymous function)
                【Docker】win10上修改docker的镜像文件存储位置（九）- 通过WSL2修改
                    jwensh: 
                    win11 怎么了？
                【Docker】win10上修改docker的镜像文件存储位置（九）- 通过WSL2修改
                    accupower_r&d: 
                    win11 千万别整.太坑了。
                【Selenium】解决 Error: LavaMoat 相关报错
                    jwensh: 
                    互帮互助，你这里也是在用 metamask 吗？