reactjs - 反应路由器功能组件重定向事件

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

如何以编程方式重定向？

谢谢

标签： reactjsreact-router-dom

Answer 1

将组件包装App在withRouterHOC 中并移至BrowserRouter组件AppContainer。这应该有效。

import { Route, Link, BrowserRouter, withRouter } from "react-router-dom";

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

const AppWithRouter = withRouter(App);

const AppContainer = () => {
  return (
    <BrowserRouter>
      <AppWithRouter />
    </BrowserRouter>
  );
};

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