在`react-router`路由中使用`useReducer`失败答案

【问题标题】：`useReducer` failing when used in `react-router` route在`react-router`路由中使用`useReducer`失败
【发布时间】：2019-12-28 11:48:16
【问题描述】：

使用useReducer 会抛出一个错误，告诉我挂钩规则已被破坏。为什么会这样？有没有简单的方法来解决它？

import * as React from "react";
import { useReducer, Reducer } from "react";
import { render } from "react-dom";
import {
  RouteComponentProps,
  BrowserRouter as Router,
  Route,
  Switch
} from "react-router-dom";
import "./styles.css";

const HelloRoute: React.FunctionComponent<RouteComponentProps> = () => {
  const [state, dispatch] = useReducer(state => state, {});
  return <div>Hello Route</div>;
};
function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path="/" render={HelloRoute} />
        </Switch>
      </Router>
    </div>
  );
}

const rootElement = document.getElementById("root");
render(<App />, rootElement);

工作sandbox

【问题讨论】：

标签： javascript reactjs typescript react-router react-hooks

【解决方案1】：

问题出在这一行

<Route path="/" render={HelloRoute} />

render 接受一个函数而不是一个组件。要解决此问题，必须将其包装在箭头函数中：

<Route path="/" render={(props) => <HelloRoute {...props}/>} />

【讨论】：

另一种选择是使用component，而不是render，如：<Route path="/" component={HelloRoute} />。