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

我有一个带有react路由器的功能组件。
使用

时工作正常，但我想在某些事件上重定向。
问题是

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>
  );
}

功能应用程序（道具）{
const onClick=（）=>{
console.log（props.history）；
//道具。历史。推（“/about”）；
};
返回(
关于

onclick重定向
);
}

如何以编程方式重定向

---

谢谢

将你的

App

组件包装在

withRouter

HOC中，并将

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);

从“react router dom”导入{Route，Link，BrowserRouter，withRouter}；
功能应用程序（道具）{
const onClick=（）=>{
console.log（props.history）；
道具。历史。推（“/about”）；
};
返回(
关于

onclick重定向
);
}
const-AppWithRouter=withRouter（App）；
const AppContainer=（）=>{
返回(
);
};
const rootElement=document.getElementById（“根”）；
render（，rootElement）；
之所以
此.props.history
是
未定义的
，是因为您只能在设置的路线中访问此道具。道具将传递到所有路线。如果您希望从应用程序组件重定向用户，那么您应该使用
链接
组件


从“React”导入React；
从“react dom”导入react dom；
从“react router dom”导入{Route，Link，BrowserRouter}；
导入“/styles.css”；
从“/components/About”导入关于；
常量应用=（）=>(
关于
);
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

从“React”导入React；
const About=props=>{
const onClick=（）=>{
控制台日志（道具）；
道具。历史。推（“/about”）；
};
返回(
关于我们
onclick重定向
);
};
导出默认值约为；
Thank的可能重复，当涉及子组件时会发生什么？是否应手动将历史记录传递给每个子组件？如果是这样，那太疯狂了。。。谢谢…用路由器HOC包装子组件。如果您使用的是最新版本的react router dom，请使用
useHistory
hook。
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;