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，是否可以作为 prop 来访问history？

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

Answer 2

您需要从react-router-dom导入Redirect，

import {Redirect} frpm 'react-router-dom'

用法，

search(e) {
    e.preventDefault();
    if(this.state.value){
        return <Redirect to={`/search/${this.state.value}`}
    }
}

ReactJS-重定向到主要组件

2 个答案: