when button is clicked, It should redirect to other page

Question

When I clicked on Submit button, It should redirect me to another page, Where my other all pages should display there.. This is the submit page, Where I written one function to redirect to Home page.

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;

This is my Home page,Where I have written code for routing for all other pages

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

When I clicked on Submit button , It should take me to other Page.

Answer 1

You don't have /Home path. So, change this:

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

with this:

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

Answer 2

When want to navigate to /Home,

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

But you don't have any Route to handle this navigation.

You can do this,

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

Also you need to wrap your component using withRouter HOC.

You can get access to the history object’s properties and the closest <Route>'s match via the withRouter higher-order component. withRouter will pass updated match, location, and history props to the wrapped component whenever it renders.

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



class App extends Component {
   ...
}

export default withRouter(App)

---

Another way is using Redirect. When using Redirect, you don't need withRouter HOC.

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



class App extends Component {

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

  ...
}

export default App

---

Update

Your App component is outside of your Router, so in this case you can not use Redirect or withRouter for navigation.

To use proper navigation, your App component should be inside of Router.

Check the demo below, I have restructure your code a bit to fit it into your requirement.

Demo

Answer 3

You have a Home component, and a / route

And you are trying to render the /Home route that doesn't exist

You have 2 options:

1) Redirect the user to / that will render the Home component by using

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

2) Add a route to /Home that will also render the Home Component <Route path ="/Home" component={Home}></Route>

Answer 4

first things is that you have to wrapped first component that i dont know which comp is, wrappe by BrowserRouter and in inner comp if wrapped your routes by Switch.

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

and in app js you can use this:

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

and in the inner component that related route define in home.js, you can use below هnstructions. Base on https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md

You can get access to the history object's properties and the closest 's match via the withRouter higher-order component. withRouter will pass updated match, location, and history props to the wrapped component whenever it renders.

in App.js at forst import withRouter

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

you can use it for click on button instead of div.