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?

Answer 1

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>