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

Question

I have a react navbar in my main component and on there I have a search bar. I want to be able to have users type text into the search box and then for it to route to a search component which returns the results.

The problem is that the main component doesn't have the props.history to enable me to push the route. I understand that this is because the props are part of the router component which it won't be able to access.

I have tried creating a separate component for the search part of the navbar, but it still doesn't have the props. I will consider writing the main component to perform all the searches, but I want to keep it separate from the main code really. Is there another way to do this.

My code:

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;

The findBooks method is where I want to force it to route to the FindBooks component.

Answer 1

Is something like this what you're looking for?

For the sake of "archival":

• Source Code (on GitHub)
• Live Demo