Как перенаправить одну страницу на другую в реакцииJS?

Question

App.js

Это нажатие кнопки обработки события:

this.handleClick = this.handleClick.bind(this);


handleClick(e) {
    debugger;
    e.preventDefault();
    this.context.router.history.push('/HomePage');
  }


<button onClick={this.handleClick}>Navigate </button>

TypeError: Невозможно прочитать свойство 'history' из неопределенного

Я установил это, используя: npm install prop-types --save

Это не работает.

Answer 1

JSX

<Link to="/home">Homepage</Link>

Если вы хотите использовать его в jsx. <Link> компилируется в тег <a> в HTML, поэтому просто относитесь к нему

1010 * Программный * this.props.history.push('/home'); Причина, по которой история не определена, заключается в том, что главная страница маршрутизации настроена неправильно // app.js import { BrowserRouter, Route, } from 'react-router-dom' import UserList from './path/to/UserListComponent' class App extends Component { ... render() { return ( <BrowserRouter> ... <Route path="/users" component={UserList}/> ... </BrowserRouter> ) } } Сделай что-нибудь подобное

Answer 2

У вас есть два пути

используйте Redirect из react-router:

В вашем методе handleClick установите состояние и проверьте метод рендеринга, и если это true Перенаправьте, как показано ниже:

<Redirect to="/HomePage" /> 

И еще один способ - использовать window.location, например:

window.location = '/HomePage';