从React-Bootstrap Navbar搜索路由到搜索组件

Question

我的主要组件中有一个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组件。

Answer 1

您正在寻找类似这样的东西吗？

为了“档案”：

• 源代码（在GitHub上）
• 现场演示