如何在输入导航栏中使用链接、导航链接或重定向（不是完全重新加载）更改路径

Question

我想从 NavBar 组件中的搜索栏更改 /search/:username 的路径，但是当我使用导航链接、链接和重定向时，我的导航栏消失了。我只能使用 window.location 更改路径，但我只想重新加载数据。

这是我的 app.js

      <div>
        <NavBar user={user} />
        <div className="container not-navbar">
          <Switch>
            <Route
              path="/profile/:username?"
              render={props => <Profile {...props} user={user} />}
            />
            {/* <Route
              path="/feed"
              render={props => <Feed {...props} user={user} />}
            /> */}
            <Route path="/search/:username" exact component={SearchPerson} />
            <Route path="/login" exact component={Login} />
            <Route path="/logout" exact component={Logout} />
            <Route path="/register" exact component={Register} />
            <Route path="/not-found" component={NotFound} />
            <Route path="/" exact component={Intro} />
            <Redirect to="/not-found" />
          </Switch>
        </div>
      </div> 

我不知道要更改导航栏中的路径，因为我的导航栏中的道具不可用路线道具。 如果您知道在没有链接、重定向或导航链接的情况下更改路径不能完全重新加载，请告诉我。

我的功能

onSubmit = e => {
    e.preventDefault();
    this.setState({ redirect: true });
  };



render() {
    const { user } = this.props;
    if (this.state.redirect) {
      return <Link to={`/search/${this.state.searchInput}`} />;
    }

Answer 1

您可以简单地使用重定向来更改页面

  onSubmit = e => {
    e.preventDefault();
    this.setState({ redirect: true });
  };
  render() {
    const { user } = this.props;
    if (this.state.redirect) {
      return <Redirect to={`/search/${this.state.searchInput}`} />;
    }