Question

我有一个React容器，而且我还有主导航。我希望我的主导航能够在单击链接时控制容器中的react应用。我的想法是，当单击链接时，将HREF值推到地址栏（pushState），然后重新渲染，以希望React能够识别新URL并进行相应渲染。以下是我的尝试：

index.jsx

import React from 'react';
import { render } from 'react-dom';

import App from './App';

// when each link is clicked, push state and re-render React app 
const links = document.getElementById("page").getElementsByTagName("A");
for (let i=0; i<links.length; i++) {

  links[i].addEventListener("click", e => {

    // push the route to address bar 
    history.replaceState(null, null, e.target.getAttribute("href"));

    // call render 
    render(
      <App/>,
      document.getElementById('react-app')
    );

    e.preventDefault();
    return false;
  })
};

HTML

<body>
  <div id="page">
    <nav class="navbar ..">
      [.. main nav links ..]
    </nav>
    
    <div id="react-app">
      [.. here is where will be re-rendered ..]
    </div>
  </div>
</body>

但是，它似乎是第一次工作，但没有再次工作。我猜在pushState之后的新路线没有被拾取吗？还是render调用不执行任何操作，因为该组件已被附加？

推送状态后反应重新渲染App组件

0 个答案: