如何在 react 中的新路由更改上使用 useEffect 重新渲染变量

Question

当路径名为“/”时，我正在尝试设置组件的宽度。

我在首页和其余页面上分别使用useEffect将宽度设置为800px和1200px。

但是，当我使用 useEffect 并单击按钮更改路线时，useEffect 似乎不会重新渲染宽度变量。

目前，在初始页面加载时，宽度样式确实会根据我所在的路线而改变，但是当我切换路线时，宽度大小不会发生变化。

简而言之，如何根据当前显示的路线更改宽度变量？

这是我目前所拥有的：

function Window() {
  const [width, setWidth] = useState(null)
  let smWidth = '800px'
  let lgWidth = '1200px'

  useEffect(() => {
    let pathname = window.location.pathname
    if (pathname === '/') {
      console.log(pathname)
      setWidth(smWidth)
    } else {
      console.log(pathname)
      setWidth(lgWidth)
    }
  }, [smWidth, lgWidth])

  return (
    <WindowWrapper style={{ width }}>
     </Switch>
       <Route path="/goals" component={goals} />
      <Route path="/" component={Home} />
    </Switch>
  )
}

Answer 1

你的 useEffect 有问题，你必须听历史变化才能使钩子起作用，现在你正在听 [smWidth, lgWidth]，它告诉 react，每当这两个变量发生变化时，更新组件。

这是codepen 链接。

这应该适合你。

import React, { useEffect, useState } from 'react';
import { withRouter, Switch, Route, Link } from 'react-router-dom';
import Home from './Home';
import Contactus from './Contactus';

export default withRouter(function App({ location }) {
  const [currentPath, setCurrentPath] = useState(location.pathname);
  const [width, setWidth] = useState();
  let smWidth = '100px';
  let lgWidth = '200px';

  useEffect(() => {
    const { pathname } = location;
    setCurrentPath(pathname);

    if (pathname === '/') {
      console.log(pathname);
      setWidth(smWidth);
    } else {
      console.log(pathname);
      setWidth(lgWidth);
    }
  }, [location.pathname]);

  return (
    <div className="App">
      <div className="p-1">
        <Link to="/" className="btn btn-primary">
          Home
        </Link>
        {' - '}
        <Link to="/contactus" className="btn btn-primary">
          Contact us
        </Link>
      </div>
      <div className="p-1">
        <div style={{ width }} className="alert alert-info mt-1" role="alert">
          Demo Width Change: {width}
        </div>
      </div>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/contactus" component={Contactus} />
      </Switch>
    </div>
  );
});