javascript - ReactJS - 在主组件中重定向

Question

我想在提交表单(搜索栏功能)后重定向到包含搜索结果的其他页面。

我通常会使用 return <Redirect to={'/search/' + this.state.value} /> 重定向在render() ，但我现在不能，因为我需要呈现整个网站(搜索栏在主要组件中)。我已经试过了this.props.history.push('/search/' + this.state.value)和 this.context.router.history.push('/search/' + this.state.value)代替评论，但它不起作用。

(为了清晰起见简化了代码)

import React, { Component } from "react";
import {
  Route,
  NavLink,
  BrowserRouter
} from "react-router-dom";
import Search from "./Search";
import Autosuggest from 'react-autosuggest';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = { value: '' };
    this.search = this.search.bind(this);
  }

  // react-autosuggest code

  search(e) {
    e.preventDefault();
    // Redirect to '/search/' + this.state.value
  }

  render() {
    return (
      <BrowserRouter>
        <div className="app">
          <div className="header">
            <form className="search-form" onSubmit={this.search}>
                {/* Autosuggest input which updates this.state.value */}
            </form>
          </div>

          <div className="main">
            <Route path="/search/:handle" component={Search} />
            {/* Other Routes */}
          </div>
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

两者都是 this.props.history和 this.context.router.history如果我尝试使用它们，则未定义。 <Redirect /> (显然)不能代替 <BrowserRouter /> 呈现

Answer 1

您是否尝试过使用 withRouter HOC 到 App，让您可以访问 history作为 Prop ？

class App extends Component {
  // ...
  search(e) {
    e.preventDefault();
    this.props.history.push(`/search/${this.state.value}`)
  }
  // ....
}
export default withRouter(App)