react router link is not working reactjs

Question

I am trying to use react-router navigation in a button.

dashboard.js

handleClick() {
   <Link to="/deneme">Deneme</Link>;
   console.log('clicked!');
}

<Button color="primary" onClick={this.handleClick}>Hesapla</Button>

And i configured my route like:

index.js

<HashRouter>
  <Switch>
    <Route path="/" name="Home" component={Full}/>
  </Switch>
</HashRouter>

Full.js

<Switch>
    <Route path="/dashboard" name="Dashboard" component={Dashboard} />
    <Route path="/deneme" name="Deneme" component={Deneme} />
</Switch>

handleClick working but link doesn't work. Any suggestion?

Answer 1

Link is a ui element, you have to render it inside render method and onClick of that link will take you to that page, putting Link inside a method will not redirect you to that page.

You have two options:

1- Put that Link inside render method where you define the handle click, means like this:

<Button color="primary">
    <Link to='/deneme'>Hesapla</Link>
</Button>

And remove handleClick method.

2- Another way is, navigate dynamically by pushing the route into history, like this:

handleClick() {
   this.props.history.push('/deneme');
}

For more details check this answer: How to navigate dynamically using react router dom

Assuming you are using React-Router V4.