Creating a button to a new route reactJS

Question

Really struggling with understanding how to create a button which routes to a new page (search.js).

I've tried different methods which some have worked in routing to the link but the page does not change (but I can see the url being changed to the search page).

*sorry at this point the code has been butchered with numerous attempts of adding the button

App.js -

```
import React, { useState } from "react";
import { BrowserRouter as Router, Link } from 'react-router-dom';
import Route from 'react-router-dom/Route';


function App() {
  const [joke, setJoke] = useState()
  const newJoke = () => {
    fetch("http://api.icndb.com/jokes/random")
      .then(result => result.json())
      .then(result2 => {
        console.log(result2)
        setJoke(result2.value.joke)
      })
    return newJoke
  }



  return (
    <Router>
      <div className="jokeSection">
        <h1>Chuck norris jokes</h1>
        <h3>{joke}</h3>
        <button onClick={() => newJoke()}>Click here for a chuckle</button>
        <button onClick={() => { this.props.history.push("/search"); }}>Search!!</button>
      </div>
      <ul>
        <li>
          <Link to="/App">Home</Link>
        </li>
        <li>
          <Link to="/search">Search</Link>
        </li>
      </ul>

    </Router>

  )
}

export default App;```

Search.js

    import React from "react";

    function Search() {
        return (
            <div>
                <h2>Search</h2>
            </div>
        );
    }

    export default Search;

Ideally I want a button (just like the button onClick) to route to a new page - search.js.

I'm new to ReactJS and have tried to watch many tutorials but i'm having difficulty.

Hiho. You have set it up completely wrong as far as I can see. Please have a deeper look over here: reacttraining.com/react-router/web/guides/quick-start Mainly you have to get rid of the Link from App.js and start using Route. This is where you set the routes up. — GeraltDieSocke
– GeraltDieSocke, Commented Nov 28, 2019 at 13:04
Hi, what confused me about this is that it doesn't seem to route to a new page for e.g. it routes to the function which act like pages e.g. home/ about/ etc.. ? is this the way to do it? can I not route to a new page? — Sharoze Khan
– Sharoze Khan, Commented Nov 28, 2019 at 13:06
Sure you can. But it's not set up completely. You first have to let the app know which routes there are in your app and which component it should render when you are on the specific route with Route. And then you can make a button from page A with a Link Component that links to page B. When you click it the router knows which page to render. You can find all this information in the resource from my first comment. — GeraltDieSocke
– GeraltDieSocke, Commented Nov 28, 2019 at 13:08

Muhammad Zeeshan · Accepted Answer · 2019-11-28 18:14:12Z

3

In your app.js file you need to have <Route> as children of <Router> not <Link>.

You can look over this code:

<Router>
    <div>
      <Route exact path="/">
        <Home />
      </Route>
      <Route path="/news">
        <NewsFeed />
      </Route>
    </div>
  </Router>

The above code will create routes for your react application. Then you can navigate to each of them using <Link> in your Navbar rather than ordinary a tag.

edited Nov 28, 2019 at 18:14

answered Nov 28, 2019 at 13:10

Muhammad Zeeshan

4,7784 gold badges19 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

GeraltDieSocke Over a year ago

This is correct and then when you render a Link like that <Link to="/news>News</Link> and you click it, you get transferred to the NewsFeed component.

Sharoze Khan Over a year ago

Does this still apply to a button? I don't want a navbar/ link, I want to create a single button which includes routing to the search page

Muhammad Zeeshan Over a year ago

Yes. You can do it like this: <Link to="/search"><button>Search</button></Link>

Collectives™ on Stack Overflow

Creating a button to a new route reactJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related