Я новичок в React, и у меня возникла проблема с перенаправлением на новую страницу с помощью обработчиков событий JavaScript. Я не знаю, что я не понимаю.
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;
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.info(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.info(url);
this.props.history.push(url);
}
Рад, что помог :)
Вместо перенаправления из функции используйте метод рендеринга и состояние для решения проблемы redirect
.
class Users extends Component {
constructor(){
super();
this.state = {
name:'aminu',
toUser: false
};
}
gotoURL(usr){
let url = `/user/${usr}`;
//console.info(url);
this.setState({toUser:true, goto: url})
}
render() {
if (this.state.toUser === true) {
return <Redirect to = {this.state.goto}/>
}
return (
<div className = "container">
<button onClick = {this.gotoURL.bind(this, this.state.name)}>
Go to {this.state.name} page
</button>
</div>
);
}
}
Вы можете использовать компонент Link из react-v4, чтобы изменить свой маршрут.
import { Link } from 'react-router-dom';
<div className = "container">
<Link to = {`/user/${usr}`}
<button>
Go to {this.state.name} page
</button>
</Link>
</div>
так просто, почему я не наткнулся на это, спасибо, босс .. работает ..