Reactjs 从React引导导航栏搜索路由到搜索组件

我有一个反应导航栏在我的主要组成部分，在那里我有一个搜索栏。我希望能够让用户在搜索框中键入文本，然后将其发送到返回结果的搜索组件

问题是主组件没有props.history使我能够推动路线。我理解这是因为道具是路由器组件的一部分，它将无法访问

我曾尝试为导航栏的搜索部分创建一个单独的组件，但它仍然没有道具。我会考虑编写主要的组件来执行所有的搜索，但是我真的想把它与主代码分开。还有别的办法吗

我的代码：

index.js

import React from "react";
import ReactDOM from "react-dom";
import Main from "./Main";
import "./index.css";


ReactDOM.render(
  <Main/>,
  document.getElementById("root")
);

main.js

import React, { Component } from "react";
import {
  Route,
  NavLink,
  HashRouter
} from "react-router-dom";

import Home from "./home";
import FindBooks from "./findbooks";

import {
  Container,
  Row,
  Col,
  Navbar,
  Nav,
  FormControl,
  Form,
  Button
} from 'react-bootstrap';

class Main extends Component {


  constructor(props) {
    super(props);
    this.state = ({
            });
  }


  findBooks = () => {
    //Route to my FindBooks component
  }

  render() {
    //alert(Auth.getTokenExpiry());
    //alert(this.state.loggedin);
    if(this.state.loggedin) {
      return (
        <HashRouter>
          <Container>
            <Row>
              <Col md={4}>
              <Navbar bg="dark" variant="dark">
                <Nav className="mr-auto">
                  <NavLink to="/">Home</NavLink>
                </Nav>
                <Form inline>
                  <FormControl type="text" placeholder="Search" className="mr-sm-2" onChange={this.changeSearchText} value={this.state.searchtext} onClick={this.findBooks}/>
                  <Button variant="outline-primary">Search</Button>
                </Form>
              </Navbar>
              </Col>
            </Row>
          </div>
            <Row>
              <Col></Col>
              <Col md={10}>
                <div style={divStyle}></div>
                <Route exact path="/" component = {Home}/>
                <Route path="/findbooks" render={props => (<FindBooks {...props} searchstring={this.state.searchtext} searchterms {"bytitle"} />)}/>
              </Col>
            </Row>
          </Container>
        </HashRouter>
      );
  }

}

export default Main;

---

findBooks方法是我想要强制它路由到findBooks组件的地方。

您正在寻找这样的东西吗

为了存档：

---

你的导航链接线路正常吗？你能提供吗？我已经用我正在尝试做的一个大幅缩减的版本编辑了代码。我已经发布了一个答案-它有帮助吗？嗨，马特，谢谢，我要看一看，可能明天我才能让你知道，因为现在我的位置有点晚了。谢谢你，我使用了示例中的withRouter，并设法使其工作。现在，我可以让它加载FindBooks组件，因为我想让它在每次单击搜索按钮时重新加载组件，所以状态出现了新问题。