在事件发生时反应路由器功能组件重定向

Question

我有一个带有反应路由器的功能组件。
使用<Link ... />时工作正常，但我想在某些事件上重定向。
问题是props.history未定义。

function App(props) {
  const onClick = () => {
    console.log(props.history);
    //props.history.push("/about");
  };
  return (
    <div className="App">
      <BrowserRouter>
        <Link to="/about">About</Link> <br />
        <button onClick={onClick}>
          <b>onclick redirect</b>
        </button>
        <Route path="/about" component={About} />
      </BrowserRouter>
    </div>
  );
}

https://codesandbox.io/s/react-router-demo-o6s89

如何以编程方式重定向？

谢谢

Answer 1

在somelist.insert(2, None) somelist[2:3] = anotherlist HOC中将App组件包裹起来，然后将withRouter移到BrowserRouter组件中。 这应该工作。

AppContainer

Answer 2

this.props.history是undefined的原因是，您只能在设置的路线上使用此道具。该道具将传递到所有路线。如果您要从应用程序组件重定向用户，则应使用Link组件。

import React from "react";
import ReactDOM from "react-dom";
import { Route, Link, BrowserRouter } from "react-router-dom";
import "./styles.css";
import About from "./components/About";

const App = () => (
  <div className="App">
    <BrowserRouter>
      <Link path="/about" to="about">About</Link> 
      <Route path="/about" component={About} />
    </BrowserRouter>
  </div>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

import React from "react";

const About = props => {
  const onClick = () => {
    console.log(props);
    props.history.push("/about");
  };

  return (
    <div>
      <h1>About Us</h1>
      <button onClick={onClick}>
        <b>onclick redirect</b>
      </button>
    </div>
  );
};

export default About;