我是 React 的新手,我在使用 JavaScript 事件处理程序重定向到新页面时遇到问题。我不知道我做错了什么。
应用程序.js
import React, { Component } from 'react';
import {Switch, Route} from 'react-router-dom';
import Nav, {Jumbotron} from '../partials/headobjs';
import Footer from '../partials/footer';
import Users from '../components/user';
import UserObj from '../components/userobj';
import Err404 from '../components/err404';
//import css files..
import '../css/styles.css';
class App extends Component {
render() {
return (
<div>
<Nav />
<Jumbotron/>
<Switch>
<Route exact path='/' component={Users}/>
<Route path='/user' component={UserObj}/>
<Route component={Err404} />
</Switch>
<div className='clr'></div>
<Footer />
</div>
);
}
}
export default App;
用户.js
import React, { Component } from 'react';
import {Redirect} from 'react-router-dom';
class Users extends Component {
constructor(){
super();
this.state = {
name:aminu
};
}
gotoURL(usr){
let url = `/user/${usr}`;
//console.log(url);
return <Redirect to={url}/>
}
render() {
return (
<div className="container">
<button onClick={this.gotoURL.bind(this, this.state.name)}>
Go to {this.state.name} page
</button>
</div>
);
}
}
export default Users;
我想要函数gotoURL
重定向到新路线,但我不确定自己做错了什么,我尝试使用 browserHistory
,现在我正在试用 <Redirect/>
类,但仍无济于事。
最佳答案
Redirect
组件需要呈现,而不是返回到 onClick 处理程序,这就是它不起作用的原因。您可以改用 history.push
gotoURL(usr){
let url = `/user/${usr}`;
//console.log(url);
this.props.history.push(url);
}
关于javascript - 从 React v4 中的事件处理程序重定向 URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55573418/