從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上）
• 現場演示