[英]Link of react-router-dom is not working in firefox
我的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中吗? 那么有人可以帮我吗?
提前致谢。
您可以通过使用传递到给定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
的component
道具中使用该组件。
<Route path='/home' component={Home} />
我遇到了同样的问题,发现您通过将<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>
)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.