React将类组件转换为功能组件不起作用

Posted 2021-03-19

我正在尝试将我的类Component转换为功能组件，但是它不起作用。

问题来自此行previousLocation = this.props.location;如何在功能组件中替换它

class App extends Component {
    previousLocation = this.props.location; //the problem comes from here
    render() {
        const { location } = this.props;
        const isModal = !!(
            location.state &&
            location.state.modal &&
            this.previousLocation !== location
        );
        return (
            <div>
                <Switch location={isModal ? this.previousLocation : location}>
                    <Route exact path="/" component={Gallery} />
                    <Route exact path="/img/:id" component={Gallery} />
                    <Route exact path="/img" component={ModalPage} />
                </Switch>
                {isModal ? <Route path="/img/:id" component={ModalPage} /> : null}
            </div>
        );
    }
}

我正在尝试做的事情

const App = (props) => {
    const {previousLocation} = props.location;
    const {location} = props;
    const isModal = !!(
        location.state &&
        location.state.modal &&
        previousLocation !== location
    );
    return (
        <div>
            <Switch location={isModal ? previousLocation : location}>
                <Route exact path="/" component={Gallery}/>
                <Route exact path="/img/:id" component={Gallery}/>
                <Route exact path="/img" component={ModalPage}/>
            </Switch>
            {isModal ? <Route path="/img/:id" component={ModalPage}/> : null}
        </div>
    );
}

答案

How to get the previous props or state

const usePrevious = value => {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

用法：

const App = ({ location }) => {
  // get previous location and cache current location
  const previousLocation = usePrevious(location);

  const isModal = !!(
    location.state &&
    location.state.modal &&
    previousLocation !== location
  );

  return (
    <div>
      <Switch location={isModal ? previousLocation : location}>
        <Route exact path="/" component={Gallery}/>
        <Route exact path="/img/:id" component={Gallery}/>
        <Route exact path="/img" component={ModalPage}/>
      </Switch>
      {isModal ? <Route path="/img/:id" component={ModalPage}/> : null}
    </div>
  );
}