用React提取公共代码、建立路由Store并检查路由参数类型，让路由更具态势化

提取公共代码

在React中，我们经常会在多个组件中使用相同的代码。为了避免重复书写，我们可以将这些公共代码提取出来，然后在需要的地方引用它们。

例如，我们可以在一个名为Common.js的文件中定义一个Button组件，然后在其他组件中引用它：

// Common.js
import React from "react";

const Button = (props) => {
  return (
    <button onClick={props.onClick}>{props.children}</button>
  );
};

export default Button;

// OtherComponent.js
import React from "react";
import Button from "./Common";

const OtherComponent = () => {
  return (
    <div>
      <Button onClick={() => { console.log("Clicked!") }}>Click Me</Button>
    </div>
  );
};

export default OtherComponent;

这样，我们就可以在不同的组件中使用Button组件，而无需重复书写代码。

建立路由Store

在React中，路由是程序状态的一个切片。路由中包含的信息越多越细，程序的切片就能越多越细。

我们可以通过建立一个路由Store来管理路由状态。路由Store可以是一个普通的JavaScript对象，也可以是一个Redux Store。

例如，我们可以创建一个名为RouterStore的JavaScript对象来管理路由状态：

const RouterStore = {
  pathname: "/",
  params: {},
  query: {}
};

然后，我们可以使用useRouter钩子来访问路由Store：

import { useRouter } from "react-router-dom";

const Component = () => {
  const router = useRouter();

  return (
    <div>
      <h1>{router.pathname}</h1>
      <ul>
        {Object.keys(router.params).map((param) => (
          <li key={param}>{param}: {router.params[param]}</li>
        ))}
      </ul>
      <ul>
        {Object.keys(router.query).map((param) => (
          <li key={param}>{param}: {router.query[param]}</li>
        ))}
      </ul>
    </div>
  );
};

这样，我们就可以在组件中访问路由状态了。

检查路由参数类型

在React中，我们可以使用useParams和useQuery钩子来获取路由参数和查询参数。

import { useParams, useQuery } from "react-router-dom";

const Component = () => {
  const params = useParams();
  const query = useQuery();

  return (
    <div>
      <h1>{params.id}</h1>
      <ul>
        {Object.keys(params).map((param) => (
          <li key={param}>{param}: {params[param]}</li>
        ))}
      </ul>
      <ul>
        {Object.keys(query).map((param) => (
          <li key={param}>{param}: {query.get(param)}</li>
        ))}
      </ul>
    </div>
  );
};

但是，这些钩子返回的是字符串值。如果我们想使用这些参数做一些类型检查，我们需要先将它们转换为正确的类型。

我们可以使用Number()、Boolean()和Date()等函数来转换参数类型。

例如，我们可以将params.id转换为数字：

const id = Number(params.id);

然后，我们可以使用id来做一些类型检查：

if (id < 0) {
  throw new Error("Invalid ID");
}

总结

在React中，提取公共代码、建立路由Store并检查路由参数类型可以帮助我们构建更加态势化和灵活的路由系统。

这些技术可以帮助我们提高代码的可重用性、可维护性和可测试性。