Javascript 使用react路由器时发送道具

我已经有一段时间没有和你这样赤裸裸地在一起了。我试图理解如何在仍然使用react路由器的历史记录来更改URL的情况下发送支持。这听起来微不足道，但我很难理解这一点。我有一个简单的最小路由设置，刚好足以初始化历史对象。从这里开始，我尝试构建一个正常的应用程序，在不使用redux的情况下发送道具

index.js

---

正如在评论中提到的，您不需要使用两个单独的路由器，这是问题的根源。我建议实际删除第一个（在index.js中），并在App.js中实现路由。接下来，交换机将呈现与新路径匹配的第一条路由，“/”将与任何路径匹配，因此，您需要为该路由提供“精确”属性，或者，正如我所建议的，将其移动到交换机的底部（从而使其充当“全部捕获”）

下面是一个具有正确实现的沙盒：

编辑：

---

快速查看您的沙盒后，看起来您已经删除了一些内容，包括推送到历史记录，但只要组件在路由中呈现，对“人员”（您已使用空对象而不是数组初始化）的任何更改都将触发所需的重新呈现。

感谢共享源代码。我找到了解决办法。你需要做两件事

转到

index.js

并从

路径中删除
exact
关键字

---

现在一切正常

您正在使用多个

路由器

s，这是不可能的。删除第二个，每个应用程序只需要一个

路由器

，但您可以使用多个

路由

s。好的@devserkan我删除了第二个，但是仍然存在相同的问题。您使用准确的

/

路由包装了整个

应用程序组件-这意味着除根目录外的任何路由都不会呈现应用程序组件。请在codesandbox中共享整个代码。很难理解debug@rotimi-这里最好的是沙箱：谢谢，但这实际上没有帮助。我遇到的问题是页面没有根据路径更改使用我请求的组件进行更新。一旦阵列中的人被填满，组件应该会因为路径的改变而改变，但使用路由器不会发生这种情况。
ReactDOM.render(
  <Router>
    <Route exact path='/'>
      <App />
    </Route>
  </Router>
  ,document.getElementById('root')

...
let history = useHistory();
...
return (
    <div className="main-wrapper">
      <header>
        <Header />
      </header>
      <main>
      <Route path='/'>
        <Search collectWords={collectWords} searchWords={searchWords} />
      </Route>
      <Route path='/search-results'>
        <SearchResults people={people} />
      </Route>
      </main>
    </div>
  );

const searchWords = (e) => {
    if (e) {
      e.preventDefault();
      restAPI.getPeople(words)
        .then(response => {
          setPeople(response.data.data);
          history.push('/search-results');
        })
        .catch(error => { throw new Error(error) });
    }
  }

ReactDOM.render(
  <Router>
    <Route path="/"> {/*Remove exact from here */}
      <App />
    </Route>
  </Router>,
  document.getElementById("root")
);

const [people, setPeople] = useState([]);// See mine is an array `useState([])`