使用 RouteComponentProps 时输入错误

Question

我有一个组件可以自己呈现路线。我想使用 RouteComponentProps 访问 location 属性，但是当我将组件更改为以下方式时出现一些类型错误：

import { render } from 'react-dom';
import { Redirect, Route, Switch } from 'react-router';
import { BrowserRouter } from 'react-router-dom';
import React from 'react';
import RouteParams from './Routes';
import { map } from 'lodash';


const App = () => {
  <BrowserRouter>
    <Switch>
      {map(RouteParams().routes, route => {
        return (
          <Route exact path={route.pathName} component={route.component} />
        );
      })}
      <Redirect to="/a" />
    </Switch>
  </BrowserRouter>
  }

render(<App />, document.getElementById('root'));

Routes.tsx

import React, { FunctionComponent } from "react";

import { RouteComponentProps, withRouter } from 'react-router';
const A = () => <p>A</p>
const B = () => <p>B</p>
const C = () => <p>C</p>


interface IRouteParams {
  pathName: string;
  search: string[];
  label: string;
  component:
    | React.ComponentType<RouteComponentProps<any>>
    | React.ComponentType<any>;
}

const RouteParams: FunctionComponent<RouteComponentProps> = (
  {location}
) => {

  const showForAdmin = true;

  const {search} = location;

  console.log(search);

  const scenarioManagerRoute: IRouteParams = {
    pathName: '/a',
    search: ['a'],
    label: 'a',
    component: A,
  };

  const routes: IRouteParams[] = [
    scenarioManagerRoute,
    {
      pathName: '/b',
      search: ['b'],
      label: 'B',
      component: B,
    },
  ];

  if (showForAdmin) {
    routes.push({
      pathName: '/c',
      search: ['c'],
      label: 'C',
      component: C,
    });
  }

  return { routes, scenarioManagerRoute };
};

export default withRouter(RouteParams);

我在组件中以及在导入它时遇到错误。请指教。任何帮助表示赞赏。

错误是：

Answer 1

我可以在您的代码中看到一些问题。让我指出来：

1. 您定义了一个功能组件：RouteParams，它被导入并用作App.tsx中的对象，如下所示：

{map(RouteParams().routes, route => {
    return (
      <Route exact path={route.pathName} component={route.component} />
    );
})}

1. 功能组件RouteParams 被定义为功能组件，但它不返回任何JSX（组件应返回JSX）。因此，从技术上讲，它不能用作组件。

我对您的代码做了一些更改。

1. 我将RouteParams 转换为钩子。为此，我删除了高阶组件withRouter（因为它现在是一个钩子）。也将其命名为传统的钩子名称useRouteParams（这不是强制性的）。

import React from "react";
import { useLocation } from "react-router-dom";
import { RouteComponentProps } from "react-router";

const A = () => <p>A</p>;
const B = () => <p>B</p>;
const C = () => <p>C</p>;

interface IRouteParams {
  pathName: string;
  search: string[];
  label: string;
  component:
    | React.ComponentType<RouteComponentProps<any>>
    | React.ComponentType<any>;
}

const useRouteParams = () => {
  const showForAdmin = true;
  const location = useLocation();
  const { search } = location;

  console.log(search);

  const scenarioManagerRoute: IRouteParams = {
    pathName: "/a",
    search: ["a"],
    label: "a",
    component: A
  };

  const routes: IRouteParams[] = [
    scenarioManagerRoute,
    {
      pathName: "/b",
      search: ["b"],
      label: "B",
      component: B
    }
  ];

  if (showForAdmin) {
    routes.push({
      pathName: "/c",
      search: ["c"],
      label: "C",
      component: C
    });
  }

  return { routes, scenarioManagerRoute };
};

export default useRouteParams;

如您所见，我使用来自react-router-dom 的useLocation() 钩子来利用location。休息是一样的。

1. 在我们的App.tsx 中，我们将不得不进行一些小的调整。

import React from "react";
import { Redirect, Route, Switch } from "react-router";
import { BrowserRouter } from "react-router-dom";
import useRouteParams from "./Routes";
import "./styles.css";

export default function App() {
  return (
    <BrowserRouter>
      <AppNavigation />
    </BrowserRouter>
  );
}

const AppNavigation = () => {
  const { routes } = useRouteParams();
  return (
    <Switch>
      {routes.map(route => (
        <Route
          key={route.pathName}
          exact
          path={route.pathName}
          component={route.component}
        />
      ))}

      <Redirect to="/a" />
    </Switch>
  );
};

---

你去。希望它有所帮助。 :)