小编Ada*_*rsh的帖子

每次我在 data prop 中获取新数据但组件在我调用之前不会重新渲染 handlePanelSelection()

function StepPanel({ data, getTranslations }) {
  const [panelsData, changePanel] = useState(data);

  function handlePanelSelection(panelId) {
    switch (panelId) {
      case 8:
        changePanel(getTranslations.NeeSubCategory);
        break;
      default:
        changePanel(data);
        break;
    }
  }
  return (
    <>
      {panelsData.map(details => {
        const imgsrc = requireContext('./' + details.image);
        return (
          <div key={details.id} className="block-list">
            <div className="left-block">
              <img src={imgsrc} alt="" />
            </div>
            <div className="right-block">
              <h3>{details.title}</h3>
              <p>{details.description}</p>
              <label htmlFor="radio1" className="radio-btn">
                <input
                  type="radio"
                  onClick={() => handlePanelSelection(details.id)}
                  name="radio1"
                />
                <span></span>
              </label>
            </div>
          </div>
        );
      })}
    </>
  );
}

但是当我像下面一样取下钩子时它就起作用了

function …

我有 2 个组件，我想使用延迟加载来加载所有组件，例如

const A = lazy(() => import("../test/A")); 
const B = lazy(() => import("../test/B")); 

这将创建 2 个单独的包，并在需要时导入它们。

但是，我想创建一个包，当该包加载时，我应该能够使用上述两个组件。

我也不想创建包含上述两个组件的单个组件，因为我想要为它们两个单独的路由

我试图做这样的事情 https://codesandbox.io/s/eager-raman-mdqzc?file=/src/App.js

可以请有人解释我这种类型的功能是否可能，如果是，那么我是如何做的以及我做错了什么

应用程序.jsx

<Router history={history}>
      <>
        <Switch>
          <Route path="/" exact component={HomePage} />          
          <Route path="/test/:id" exact component={TestPage} /> 
          <Route component={NotFound} />         
        </Switch>
      </>
</Router>

render() 内的 HomePage.jsx

<Link to="/test/1" >Test link</Link>

当我单击链接时，页面成功地将我重定向到http://localhost:8080/test/1，我可以看到该页面，但如果我单击刷新，页面就会消失，我只能看到空白屏幕，如果我想要从外部访问它，即如果我直接在浏览器上输入相同的网址，我看不到该页面，它是空白的。如何在刷新时管理它并从外部访问它？

我在刷新时收到控制台消息