react-router-dom 的链接在 Firefox 中不起作用答案

【问题标题】：Link of react-router-dom is not working in firefoxreact-router-dom 的链接在 Firefox 中不起作用
【发布时间】：2019-01-10 21:46:56
【问题描述】：

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

提前致谢。

【问题讨论】：

你可以写<Route path='/home' component={Home} />。不需要额外的内联函数。如果您更改为它并暂时删除Link周围的button，它是否有效？
是的，没有按钮它对我来说工作正常。但是在按钮内部它不起作用。我刚试过。这意味着这不是路由的问题。这是按钮单击事件的问题。有什么方法可以手动调用<Link />。
手动我的意思是我可以通过在某个函数中写入链接来调用链接并在按钮的单击事件中调用该函数吗？
顺便说一句，非常感谢@Tholle

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

您可以使用传递给Route 的组件的history 属性以编程方式更改url，而不是将Link 放在button 中。

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} />

【讨论】：

如果我这样做，它会在加载主页本身时抛出以下错误 `` [显示/隐藏消息详细信息。] 错误：元素类型无效：需要一个字符串（用于内置在组件中）或类/函数（对于复合组件）但得到：对象。检查Route的渲染方法。 ```
@ShravanJain 这令人沮丧。 That's how you're supposed to use it.
太棒了，它对我有用。非常非常感谢你。你让我开心。

【解决方案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>
    )
  }
}

【讨论】：