Button onClick() page redirect in ReactJS

Question

I've seen a few questions similar to this but I nothing is honestly helping me. How do you redirect with a button click in ReactJs?

Website.js

import React from 'react';
import ReactDOM from 'react-dom';
import { withRouter, useHistory } from 'react-router-dom';

//css imports
import './App.css';
import './SplashPage/splashpage.css';

//File Imports
import Resume from "./Resume/resume.js";

//Component Import
import Button from '@material-ui/core/Button';

function App() {
  const history = useHistory()

  return (
    <div className="App">
        { <div id="cf">
          <Button onClick={() => history.push(Resume)}>
            CLICK ME
          </Button>
        </div> }
      </div>
  );
}

export default App;

I honestly think that I have tried too many options and I've just confused myself even more. From what I understand, the useHistory() function seems to be the correct way to go but as of now I get "TypeError: history is undefined".

Thank you for help!

Are you using Routing in your Application? Also where do you want the Resume component to render? — Shubham Khatri
– Shubham Khatri, Commented Apr 6, 2021 at 15:37
Would routing be the best way to go? All I want to do is create an onClick function that mimics a <a href="...> tag in HTML — Ovii
– Ovii, Commented Apr 6, 2021 at 15:42
These things can be done in many ways, you can either perform routing, or create a separate page for your Resume component and configure it to serve on a specific url, then on button push you can just open that url with window.open — Shubham Khatri
– Shubham Khatri, Commented Apr 6, 2021 at 15:46
I'm looking into routing and I think that way fits the best for my code — Ovii
– Ovii, Commented Apr 6, 2021 at 15:50

Shubham Khatri · Accepted Answer · 2021-04-06 16:12:33Z

SOLUTION 1: Without Routing, you can achieve it using multi-entry in webpack and by creating a separate page in your bundle using HTMLWebpackPlugin

entry: {
  resume: require.resolve('./path/to/Resume.js'),,
},
 output: {
  filename: '[name].[contenthash:8].js'
},
plugins: [
  // Generates an `index.html` file with the <script> injected.
  new HtmlWebpackPlugin(
      {
        filename: 'resume/index.html',
        inject: true,
        template: 'SOME_HTML_TEMPLATE,
      }
    )
  ),
 ]

SOLUTION 2 With routing

It is much easier to implement

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, useHistory } from 'react-router-dom';

//css imports
import './App.css';
import './SplashPage/splashpage.css';

//File Imports
import Resume from "./Resume/resume.js";

//Component Import
import Button from '@material-ui/core/Button';

function App() {
  const history = useHistory()

  return (
    <div className="App">
        { <div id="cf">
          <Button onClick={() => history.push('resume')}>
            CLICK ME
          </Button>
        </div> }
      </div>
  );
}

const Main = () => (
   <BrowserRouter>
     <Switch>
       <Route path="/resume" component={Resume} />
       <Route path="/" component={App} />
     </Switch>
   </BrowserRouter>
)

export default Main;

Rehan Sattar · Accepted Answer · 2021-04-06 15:43:54Z

0

If you take a look at the documentation of useHistory you will understand the complete cycle of how this works.

Example from docs:

import { useHistory } from "react-router-dom";

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home"); // Here you have to pass the route where you want to redirect 
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

You can study here: https://reactrouter.com/web/api/Hooks/usehistory

answered Apr 6, 2021 at 15:43

Rehan Sattar

4,1054 gold badges16 silver badges22 bronze badges

2 Comments

Ovii Over a year ago

I followed this example and I'm still getting "TypeError: history is undefined" once I click on the button

Rehan Sattar Over a year ago

Have you wrapped your components in <BrowserRouter /> or <Router /> ?

Rashed Rahat · Accepted Answer · 2021-04-06 16:07:51Z

Updated

You were pretty close :)

Here is the solution:

import React from 'react';
import ReactDOM from 'react-dom';
import { withRouter, useHistory } from 'react-router-dom';

//css imports
import './App.css';
import './SplashPage/splashpage.css';

//Component Import
import Button from '@material-ui/core/Button';

function App() {
  const history = useHistory()

  return (
    <div className="App">
        { <div id="cf">
          <Button onClick={() => history.push('/resume')}> <-- Here changed; It will redirect to /resume
            CLICK ME
          </Button>
        </div> }
      </div>
  );
}

export default App;

Index.js

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import { Switch, Route, BrowserRouter as Router } from "react-router-dom";

import App from "./App";
import Resume from "./Resume";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <Router>
      <Switch>
        <Route path="/" exact component={App} />
        <Route path="/resume" component={Resume} />
      </Switch>
    </Router>
  </StrictMode>,
  rootElement
);

Happy coding :)

I'm still getting "TypeError: history is undefined". The file path should be "./Resume/resume.js". No luck so far
codesandbox.io/s/optimistic-fast-jpv4y?file=/src/index.js I have created an online live demo please check. This is as the way you are looking for :)

Collectives™ on Stack Overflow

Button onClick() page redirect in ReactJS

3 Answers 3

Comments

2 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Linked

Related