时间戳

首页 > 解决方案 > 使用反应路由器时发送道具

javascript - 使用反应路由器时发送道具

问题描述

我已经有一段时间没有使用过如此裸露的反应路由器了。我试图了解如何在仍然使用反应路由器的历史记录来更改 URL 的同时发送道具。这听起来微不足道，但我很难理解这一点。我对路由的最低设置足以初始化历史对象。从那里开始，我正在尝试像往常一样构建应用程序以在不使用 redux 的情况下发送道具。

index.js

ReactDOM.render(
  <Router>
    <Route exact path='/'>
      <App />
    </Route>
  </Router>
  ,document.getElementById('root')

应用程序.js

...
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>
  );

当用户执行搜索时，会调用此函数，但这对我来说是中断的地方。我得到一个没有道具的空白屏幕，但 URL 确实发生了变化。

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) });
    }
  }

标签： javascriptreactjsreact-routerreact-router-dom

解决方案

感谢分享源代码。我找到了解决方案。你需要做两件事

  1. 转到index.js并exact从Route
ReactDOM.render(
  <Router>
    <Route path="/"> {/*Remove exact from here */}
      <App />
    </Route>
  </Router>,
  document.getElementById("root")
);
  1. 完成上述操作后，它将解决您的问题，但随后您将收到另一个错误消息people.map is not a function。您需要将people状态中的默认值从对象更改为数组。喜欢：
const [people, setPeople] = useState([]);// See mine is an array `useState([])`

现在一切都应该正常

推荐阅读