我的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中吗?那么有人可以帮我吗?

提前致谢。

最佳答案

我遇到了同样的问题,发现您通过将<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>
    )
  }
}

关于javascript - 在firefox中react-router-dom的链接不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51665178/

10-10 14:50