点击搜索后使用Link / Route的ReactJS

如何解决点击搜索后使用Link / Route的ReactJS

import React from "react";

class SearchResults extends React.PureComponent {
  render() {
    return (
      <React.Fragment>
        <h1 style={{ marginLeft: "20px" }}>
        Search result
        </h1>
      </React.Fragment>
    );
  }
}
export default SearchResults;

现在我定义了一个函数

searchById = (Id) => {
    console.log("On Id Search=",Id);
    this.setState({Id: this.Id});
    // <Link
    //   to={{
    //     pathname: "/resultForSearchWitId",//     search: "?Id="+Id,//     hash: "#searchResults",//     state: {fromDashboard: true}
    //   }}
    // return <Link to="#/searchResults" />;
    // return <Redirect to="/" />;
    console.log(this.props.history);
   this.props.history.pathname = 'searchResults';
  };

理想情况下，我想使用Link路由要加载到searchResuts.js文件中的结果的内容。我将路线定义为

      <Route path="/searchResults" component={SearchResults} />

应用启动时，我会看到以下路线

      <Route exact path="/" component={Dashboard} />

可以工作，并且所有菜单项也可以与上面的代码一起很好地工作，但是我的搜索结果JS文件从未被调用。

我想念什么？我在菜单和输入设计中使用ant.design和ReactJS。

即使this.props.history.pathname = 'searchResults';也不起作用。当前设计的保留页面无法加载。

更新：路由器存根代码

<Router>
    <Layout style={{ minHeight: "100vh" }}>
      <Sider
        collapsible
        collapsed={this.state.collapsed}
        onCollapse={this.onCollapse}
      >
        <Search
          placeholder="Search by ID"
          onSearch={this.searchById}
          style={{ marginTop: "10px" }}
        />

        <Menu theme="dark" defaultSelectedKeys={["1"]} mode="inline">
          <SubMenu
            key="0"
            title={
              <span>
                <Icon type="appstore" />
                <span>Test App</span>
              </span>
            }
          >
            <Menu.Item key="0-1">
              <span>Dummy Link 1</span>
              <Link to="/dummyLink1" />
            </Menu.Item>
            <Menu.Item key="0-2">
              <span>Dummy Link 2</span>
              <Link to="/dummpyLink2" />
            </Menu.Item>
          </SubMenu>
        </Menu>
      </Sider>
      <Layout>
        <Header style={{ background: "#fff",padding: 0,paddingLeft: 16 }}>
          <Icon
            className="trigger"
            type={this.state.collapsed ? "menu-unfold" : "menu-fold"}
            style={{ cursor: "pointer" }}
            onClick={this.toggle}
          />
        </Header>
        <Content
          style={{
            margin: "24px 16px",padding: 24,background: "#fff",minHeight: 280,}}
        >
          <Route exact path="/" component={Dashboard} />
          <Route path="/searchResults" component={SearchResults} />
          <Route path="/dummpyLink1" component={DummyLink1} />
          <Route path="/dummpyLink2" component={DummyLink2} />
        </Content>
      </Layout>
    </Layout>
  </Router>

解决方法

如果searchById函数重定向到seaech结果页面，则需要在其中添加以下行：

this.props.history.push('/searchResults)

使用 push() 方法，您也可以传递参数

searchById = (Id) => {
    console.log("On Id Search=",Id);
    this.setState({Id: this.Id});
   this.props.history.push({
     pathname: "/searchResults",search: "?Id="+Id,state: {fromDashboard: true}
   });
  };

如果您要强制性地导航到SearchResults页面组件，则应将历史记录推送到路径并传递路径状态下的任何数据。

searchById = (Id) => {
  console.log("On Id Search=",Id);
  this.setState({Id: this.Id});
  this.props.history.push({
    pathname: '/searchResults',state: {
      searchResults: /* the search result data */,},});
};

在location道具的接收路线组件访问路线状态中。

class SearchResults extends React.PureComponent {
  render() {
    const { location: { state: { searchResults } } } = this.props;

    return (
      <React.Fragment>
        <h1 style={{ marginLeft: "20px" }}>
        Search result
        </h1>
        {searchResults.map(...)}
      </React.Fragment>
    );
  }
}