How to redirect to another page on button click in Reactjs

Question

I want to create a basic web application using react. I have implemented creating buttons. I want to redirect to another page on button click. Below is my App.js code

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
        <p>
          <buttontoolbar>
            <button const path = '/Components'> Click Me </button>
          </buttontoolbar>
        </p>
     </header>
    </div>

  );
}

export default App;

When i click on 'click me' button it should redirect to Components.js. Below is the code for Components.js

import React from "react"

function app(){
 return(
  <p>
  Welcome to the world. 
  </p>
 )
}

export default app

Long back i have done these king of things in ASP.NET. there i have used Response.redirect to redirect pages which is so simple. As I am new to React, i know nothing about this. Is there anything like that in React?

The usual solution for this is to use React Router. Just follow the [basic example](https://reacttraining.com/react-router/web/example/basic), you should be good to go. — Pierre V., Sep 26 '19 at 11:55
Since one of your tags is `react-router` I assume you are looking for a solution involving it? Do you already have it set up? — Tom Erik Støwer, Sep 26 '19 at 11:55
Hi pierr V and Tom thank you for the reply. Pierre i have tried the example in link. Creating a link an d redirecting is coming. but when i try to create a button and redirect it am not getting it — jung lee, Sep 26 '19 at 12:19

score 4 · Accepted Answer · answered Sep 26 '19 at 12:32

Basically React does not have "pages". The idea is more to "show" or "hide" components, this gives the user a page/view impression.

The easiest way to achieve routing in React is to use a declarative router library like react router especially for more complex apps.

Here is an example without react router to understand the basic concept:

const ViewOne = ({onClick}) => (
  <div>
    View 1 <br />
    <button onClick={() => onClick("view2")}>Go to view 2</button>
  </div>
);

const ViewTwo = ({onClick}) => (
  <div>
    View 2 <br />
    <button onClick={() => onClick("view1")}>Go to view 1</button>
  </div>
);



const App = () => {
  
  const [currentView, setCurrentView] = React.useState("view1");
  
  return (
      <div>
        {
          currentView === "view1" ? 
          <ViewOne onClick={page => setCurrentView(page)} /> : 
          <ViewTwo onClick={page => setCurrentView(page)} />
       }
      </div>
  );
};

const domContainer = document.querySelector('#my-app');
ReactDOM.render(<App />, domContainer);

<div id="my-app"></div>

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

Jaisa Ram · Answer 2 · 2019-09-26T14:33:41.770

try Link component of react-router-dom and pass to as a path to it wherever you want to redirect on onClick.

import { Link } from 'react-router-dom'

and Eg.

<Link to={'/Components'}>
  <button > Click Me </button>
</Link>

const {Link, BrowserRouter} = window.ReactRouterDOM
function App(){
  return (
  <BrowserRouter>
      <button><Link to='/abc' target='_blank'> Click Me  </Link></button>
   
    </BrowserRouter>
  )
}

ReactDOM.render(<App/>, document.getElementById("root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>

<body><div id="root"></div></body>

Sandeep Rasgotra · Answer 3 · 2019-09-26T12:11:56.243

2

Use react-router-dom package to define routing and then use one of below mentioned ways on onClick event of button.

this.props.history.push("componentpath").
browserHistory object (in react-router package).

Please refer this Link

edited Sep 26 '19 at 12:11

answered Sep 26 '19 at 12:06

Sandeep Rasgotra

582
1
7
18

Hi Sandeep, I have tried the methods in the link. i am getting this error. Failed to compile ./src/App.js Line 39: Parsing error: Unexpected token, expected ";" > 39 | hello() { | ^ 40 | alert('you clicked on me'); 41 | return ( 42 |
– jung lee Sep 26 '19 at 12:44
it must be syntactical error, i would help only if i get to see new code. – Sandeep Rasgotra Sep 26 '19 at 12:54
here is the link to the code snapshot https://drive.google.com/open?id=1i-4VjSYwbWX6zcGlpdOUttyI0XH2cPp- – jung lee Sep 26 '19 at 13:04

How to redirect to another page on button click in Reactjs

3 Answers3

Linked