Reactjs 单击按钮时，它应重定向到其他页面

当我点击提交按钮时，它会将我重定向到另一个页面，我的其他所有页面都会显示在那里。。 这是提交页面，我在这里编写了一个重定向到主页的函数

import React, {Component} from 'react';
import './App.css';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import Home from './components/home';

class App extends Component {

  constuctor() {

  }

  routeChange=()=> {
    this.props.history.push("/Home");
  }

  render () {
  return (
   <div>
       <center>
          <div>
        <label htmlFor="exampleInputEmail1">Email address : </label>
        <input type="text"  placeholder="Enter email"/>
        </div>

        <div>
        <label htmlFor="exampleInputPassword1">Password : </label>
        <input type="password"  placeholder="Password" />
        </div>
        <button  type="submit"  onClick={this.routeChange} >Submit</button>
        </center>

   </div>
  )
}
}

export default App;

import React，{Component}来自'React'；
导入“/App.css”；
从“react router dom”导入{BrowserRouter，Route，Link}；
从“./components/Home”导入Home；
类应用程序扩展组件{
构造函数（）{
}
路由更改=（）=>{
this.props.history.push（“/Home”）；
}
渲染（）{
返回(
电邮地址：
密码：
提交
)
}
}
导出默认应用程序；

这是我的主页，我在这里为所有其他页面编写了路由代码

import React, { Component } from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import Posts from './posts';
import Profile from './profile';


 class Home extends Component {

    render() {
    return (
      <div>



<center>
<BrowserRouter>
<div>
  <header>
  <Link to="/">Home</Link>
 <Link to="/Posts">Posts</Link> 
  <Link to="/Profile">Profile</Link>

  </header>
<Route exact path ="/" component={Home}></Route>
<Route path ="/Posts" component={Posts}></Route>
<Route path ="/Profile" component={Profile}></Route>
</div>
</BrowserRouter>
</center>

</div>
    )
  }
}

import React，{Component}来自'React'；
从“react router dom”导入{BrowserRouter，Route，Link}；
从“./Posts”导入帖子；
从“/Profile”导入配置文件；
类Home扩展组件{
render（）{
返回(
家
帖子
轮廓
)
}
}

---

当我点击提交按钮时，它会将我带到其他页面。

您没有

/Home

路径。因此，改变这一点：

this.props.history.push("/Home");

为此：

this.props.history.push("/");

---

您没有

/Home

路径。因此，改变这一点：

this.props.history.push("/Home");

为此：

this.props.history.push("/");

---

您有一个

Home

组件和一个

/

路由

您正在尝试渲染不存在的

/Home

路由

您有两种选择：

1） 将用户重定向到

/

，使用

routeChange=（）=>{
this.props.history.push（“/”）；
}

2） 将路由添加到

/Home

，该路由也将呈现

Home

组件

---

您有一个

主页

组件和一条

/

路线

您正在尝试渲染不存在的

/Home

路由

您有两种选择：

1） 将用户重定向到

/

，使用

routeChange=（）=>{
this.props.history.push（“/”）；
}

2） 将路由添加到

/Home

，该路由也将呈现

Home

组件

---

当想要导航到

/Home

时

this.props.history.push("/Home");

但是您没有任何

路线

来处理此导航

你可以这样做

this.props.history.push("/");   //This will navigate to your `Home` component

您还需要使用HOC包装组件

您可以通过withRouter高阶组件访问历史对象的属性和最接近的

匹配。withRouter将在渲染时向包装组件传递更新的匹配、位置和历史道具


另一种方法是使用。使用
重定向
时，您不需要使用路由器

HOC

import { BrowserRouter, Route, Link, Redirect} from 'react-router-dom';



class App extends Component {

  routeChange=()=> {
    return <Redirect to="/Home" />
  }

  ...
}

export default App

从'react router dom'导入{BrowserRouter，Route，Link，Redirect}；
类应用程序扩展组件{
路由更改=（）=>{
回来
}
...
}
导出默认应用程序

---

更新

您的

应用程序

组件位于

路由器

之外，因此在这种情况下，您不能使用

重定向

或

带路由器

进行导航

要使用正确的导航，您的

应用程序

组件应位于

路由器

内部

检查下面的演示，我已经重新构造了您的代码，使其符合您的要求

---

当想要导航到

/Home

时

this.props.history.push("/Home");

但是您没有任何

路线

来处理此导航

你可以这样做

this.props.history.push("/");   //This will navigate to your `Home` component

您还需要使用HOC包装组件

您可以通过withRouter高阶组件访问历史对象的属性和最接近的

匹配。withRouter将在渲染时向包装组件传递更新的匹配、位置和历史道具


另一种方法是使用。使用
重定向
时，您不需要使用路由器

HOC

import { BrowserRouter, Route, Link, Redirect} from 'react-router-dom';



class App extends Component {

  routeChange=()=> {
    return <Redirect to="/Home" />
  }

  ...
}

export default App

从'react router dom'导入{BrowserRouter，Route，Link，Redirect}；
类应用程序扩展组件{
路由更改=（）=>{
回来
}
...
}
导出默认应用程序

---

更新

您的

应用程序

组件位于

路由器

之外，因此在这种情况下，您不能使用

重定向

或

带路由器

进行导航

要使用正确的导航，您的

应用程序

组件应位于

路由器

内部

检查下面的演示，我已经重新构造了您的代码，使其符合您的要求

---

首先，您必须包装我不知道哪个组件的第一个组件，通过

浏览器路由器

包装，如果通过

交换机

包装路由，则在内部组件中包装

render(
        <BrowserRouter>
            <App/>
        </BrowserRouter>
    document.getElementById('App')
);

在home.js中定义的相关路由的内部组件中，可以使用下面的指令。 基于

您可以通过withRouter高阶组件访问历史对象的属性和最近的匹配。withRouter将在渲染时向包装组件传递更新的匹配、位置和历史道具

在App.js中使用路由器导入forst

import { withRouter } from "react-router";

class App extends React.Component {
handleClick = () => {
   this.props.history.push("/");
}
render () {
  return (
   <div onClick={this.handleClick}></div>
  )
}
}
export default withRouter(App);

从“反应路由器”导入{withRouter}；
类应用程序扩展了React.Component{
handleClick=（）=>{
this.props.history.push（“/”）；
}
渲染（）{
返回(
)
}
}
使用路由器（App）导出默认值；

---

您可以将其用于单击按钮而不是div。

首先，您必须包装我不知道哪个组件的第一个组件，通过

浏览器路由器包装，如果通过
交换机包装路由，则在内部组件中包装

render(
        <BrowserRouter>
            <App/>
        </BrowserRouter>
    document.getElementById('App')
);


在home.js中定义的相关路由的内部组件中，可以使用下面的指令。
基于

您可以通过withRouter高阶组件访问历史对象的属性和最近的匹配。无线路由器