如何在 React switch 语句中的组件之间传递参数？

Question

目前我有一个 React 组件如下：

export default function Company() {
  const { path } = useRouteMatch();
  const [lookupData, setLookupData] = useState();
  const queryParams = new URLSearchParams(window.location.search);
  const ticker = queryParams.get("ticker");
  
  useEffect(() => {
    const lookupPromise = getLookupData(ticker);
    lookupPromise.then((data) => {
      setLookupData(data);
    });
  }, []);
  
  return lookupData ? (
    <>
      <h2>{lookupData.data.title}</h2>
      <ul class="leftNav">
        <li class="mainList">
          <a href="/Company/Overview">Overview</a>
        </li>
        <li class="mainList">Financials</li>
        <li class="indentList">
          <a href="/Company/KeyFinancials">Key Financials</a>
        </li>
        <li class="indentList">
          <a href="/Company/IncomeStatement">Income Statement</a>
        </li>
      </ul>
      <div class="body">
        <BrowserRouter>
          <Switch>
            <Route path={`${path}/Overview`}>
              <Overview cik={lookupData.data.cik} />
            </Route>
            <Route path={`${path}/KeyFinancials`}>
              <KeyFinancials cik={lookupData.data.cik} />
            </Route>
            <Route path={`${path}/IncomeStatement`}>
              <IncomeStatement cik={lookupData.data.cik} />
            </Route>
            <Route exact path={`${path}/`}>
              <Redirect to={`${path}/Overview`} />
            </Route>
          </Switch>
        </BrowserRouter>
      </div>
    </>
  ) : "waiting for lookup data";
}

在每个组件中，我都使用 cik 来获取更多数据。 现在它会正确加载概览（使用 cik）（因为这是默认组件）。 但是，如果我切换组件或刷新页面，cik 将作为 null 进入组件（这会破坏一堆东西）。 有谁知道如何解决这个问题并使参数保持不变？

Answer 1

问题

该代码正在渲染原始锚点<a>标签以在页面之间导航，单击该标签时向服务器发出页面请求并重新加载页面，即重新安装整个应用程序。 React 状态只存在于内存中，所以在页面重新加载时它会消失，除非你从 localStorage 中持久化和重新初始化它。

解决方案

1. 使用react-router-dom中的Link组件在页面之间进行链接，这样页面/应用程序就不会重新加载/重新挂载。
2. 将 BrowserRouter 提升到BrowserRouter中更高的位置，以便Link组件在路由上下文中呈现。
3. 使用useLocation挂钩读取search字符串。

例子：

import {
  Route,
  Switch,
  Link,
  useLocation,
  useRouteMatch,
} from 'react-router-dom';

export default function Company() {
  const { path, url } = useRouteMatch();
  const { search } = useLocation();

  const [lookupData, setLookupData] = useState();

  const searchParams = new URLSearchParams(search);
  const ticker = searchParams.get("ticker");
  
  useEffect(() => {
    getLookupData(ticker)
      .then(({ data }) => { // <-- destructure `data` property
        setLookupData(data);
      });
  }, [ticker]); // <-- add missing dependency
  
  return lookupData ? (
    <>
      <h2>{lookupData.title}</h2>
      <ul class="leftNav">
        <li class="mainList">
          <Link to={`${url}/Overview`}>Overview</Link>
        </li>
        <li class="mainList">Financials</li>
        <li class="indentList">
          <Link to={`${url}/KeyFinancials`}>Key Financials</Link>
        </li>
        <li class="indentList">
          <Link to={`${url}/IncomeStatement`}>Income Statement</Link>
        </li>
      </ul>
      <div class="body">
        <Switch>
          <Route path={`${path}/Overview`}>
            <Overview cik={lookupData.cik} />
          </Route>
          <Route path={`${path}/KeyFinancials`}>
            <KeyFinancials cik={lookupData.cik} />
          </Route>
          <Route path={`${path}/IncomeStatement`}>
            <IncomeStatement cik={lookupData.cik} />
          </Route>
          <Redirect exact from={path} to={`${path}/Overview`} />
        </Switch>
      </div>
    </>
  ) : "waiting for lookup data";
}

<BrowserRouter>

  ...

  <Company />

  ...

</BrowserRouter>