Link tag from React Router isn't doing anything when you click on it

Question

Working with React Router trying to get a working to get back to the homepage. However, when you click the Link right now nothing happens.

I've tried using this link with location along with setting it to an object, neither of them are allowing me to navigate to the homepage. I found this question which suggests tying it to an onClick event and then passing the state that I need in a handler. How to use onClick event on react Link component?

Update: The route I am trying to hit

 <Route
          path="/"
          exact
          render={(routeProps, props) =>
            this.state.fetchedweatherdata ? null : (
              <Form
                {...routeProps}
                {...props}
                onChange={this.handleChange}
                {...this.state}
                onSubmit={this.onSubmit}
              />
            )
          }
        />

This is the Link under my DisplayWeather component that currently doesn't work

 <Link to="/" onClick={() => this.props.fetchedWeatherData}>
          Click here to go back to form
        </Link>

I am passing the opposite of the state of fetchedWeatherData down to the component because I want it to return to the form.

I want to be able to click the link and return back to the form for the user to submit new weather search queries. Here is a gist with more code to see how it all functions together https://gist.github.com/dhuang612/11f124274022a8188b4b0981dd6932f9

Thanks for any help provided!

`this.props.myroute` is a prop representing the route that the link is going to — ldtcoop, Sep 09 '19 at 18:59
unfortunately no. I'm still getting the same result of nothing happening — Dan, Sep 09 '19 at 19:03

score 0 · Answer 1 · edited Jun 07 '21 at 14:39

In your example gist you are importing Router from react-router but not using it anywhere. <Route/> and <Link/> components should be children of <Router/>.

A standard approach is for your index.js to look like this:

import React from "react";
import { render } from "react-dom";
import { BrowserRouter } from "react-router-dom";

import App from "./App";

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

Link tag from React Router isn't doing anything when you click on it

1 Answers1