从 React-Bootstrap 导航栏搜索路由到搜索组件

Question

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

问题是主要组件没有 props.history 使我能够推送路由。我知道这是因为 props 是它无法访问的路由器组件的一部分。

我尝试为导航栏的搜索部分创建一个单独的组件，但它仍然没有道具。我将考虑编写主要组件来执行所有搜索，但我希望将它与主要代码分开。有没有其他方法可以做到这一点。

我的代码：

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

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

为了“存档”：

• Source Code (on GitHub)
• Live Demo