javascript - 执行不同组件的功能

Question

我已经实现了一个标题。每当链接Portfolio单击标题内部，路线更改 - 我想另外触发不同组件的 ( CardHolder ) 功能。我该怎么做？

组件尚未连接。

function App() {
    return (
        <BrowserRouter>
            <div className="App">
                <Header/>
                ...
                <CartHolder />
            </div>
        </BrowserRouter>
    );
}

const header = () => {
    return (
        <div className="Header container-fluid">
            <div className="row">
                <div className="col-6">

                </div>
                <div className="col-6">
                    <ul>
                        <li>
                            <Link to="/">Portfolio</Link>
                        </li>
                        <li className="ml-4">
                            About
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    );
};

顺便说一句 CartHolder是一个基于类的组件。

Answer 1

您可以收听pathname内部变化CartHolder使用 useEffect和 useLocation ，查看pathname如果是投资组合路线，则调用该函数

import { useLocation } from 'react-router-dom'

const CartHolder = () => {
  const { pathname } = useLocation()

  const fn = () => {
    console.log('portfolio')
  }

  useEffect(() => {
    if (pathname === '/') {
      fn()
    }
  }, [pathname])

  return ...
}

对于基于类的组件，您需要使用 withRouter 包装组件从 react-router-dom 注入(inject) props 的 HOC

然后在 componentDidUpdate检查路线是否是投资组合路线，但还要检查以前的路线是否与投资组合不同，因为 componentDidUpdate 将在每次重新渲染时触发

import { withRouter } from 'react-router-dom'

class CartHolder extends Component {
  fn = () => {
    console.log('portfolio')
  }

  componentDidUpdate = prevProps => {
    const prevPathname = prevProps.location.pathname;
    const { pathname } = this.props.location;

    if (pathname === "/" && pathname !== prevPathname) {
      this.fn()
    }
  }

  render() {
    return...
  }
}