Link of react-router-dom is not working in firefox

Question

I have the following code in my routes.js file

import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom'
import Home from './components/home/Home.jsx'
import Dashboard from './components/dashboard/Dashboard.jsx'
import { browserHistory } from 'react-router'

class Routes extends Component {
  render () {
    return (
      <Router history={browserHistory}>
        <div>
          <Switch>
            <Route path='/home' component={() => (<Home />)} />
            <Route path='/dashboard' component={() => (<Dashboard />)} />
            <Redirect to={{pathname: '/home'}} />
          </Switch>
        </div>
      </Router>
    )
  }
}

export default Routes

And following is my Home.jsx

import React, { Component } from 'react'
import {Link} from 'react-router-dom'

class Home extends Component {
  render () {
    return (
      <div>
        <h1>This is a home page.</h1>
        <button>
          <Link to='/dashboard'>Click here (Dashboard)</Link>
        </button>
      </div>
    )
  }
}

export default Home

But if i'm clicking on the button present in Home.jsx then it's working fine in chrome and safari and redirecting me to the Dashboard page but it's(this button in ``Home.jsx`) not responding in firefox. And i'm not getting it get stuck in firefox? So can anyone please help me in this?

Thanks in advance.

Answer 1

Instead of putting a Link inside a button , you can change the url programmatically by using the history prop that is passed to a component given to a Route .

class Home extends Component {
  handleClick = () => {
    this.props.history.push('/dashboard');
  };

  render () {
    return (
      <div>
        <h1>This is a home page.</h1>
        <button onClick={this.handleClick}>
          Click here (Dashboard)
        </button>
      </div>
    )
  }
}

To make sure the Home component is given the route props , you must use the component directly in the Route 's component prop.

<Route path='/home' component={Home} />

Answer 2

I had the same problem and found out that you make it work in Firefox by nesting <button> inside a <Link> :

class Home extends Component {
  render () {
    return (
      <div>
        <h1>This is a home page.</h1>
        <Link to="/dashboard">
          <button>
            Click here (Dashboard)
          </button>
        </Link>
      </div>
    )
  }
}