Link of react-router-dom 在 firefox 中不工作

Question

我的 routes.js 文件中有以下代码

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

下面是我的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

但是，如果我单击 Home.jsx 中的按钮，那么它在 chrome 和 safari 中工作正常，并将我重定向到 Dashboard 页面，但它是（这个按钮在``Home.jsx`) 在 Firefox 中没有响应。而且我不明白它会卡在 Firefox 中吗？那么有人可以帮助我吗？

提前致谢。

Answer 1

不是将 Link 放在 button 中，而是可以通过使用传递给给定组件的 history 属性以编程方式更改 url 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>
    )
  }
}

要确保 Home 组件被赋予 route props，您必须直接在 Route 的 component 属性中使用该组件。

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

Answer 2

我遇到了同样的问题，发现您通过将 <button> 嵌套在 <Link> 中使其在 Firefox 中工作：

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

Link of react-router-dom 在 firefox 中不工作

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

javascript

reactjs

react-router

react-router-dom