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

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: Cannot read property 'history' of undefined

Я установил это с помощью: npm install prop-types --save

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

вы установили реактивный роутер ????

pageNotfoUnd 10.09.2018 09:33

Да, я сделал 'npm install --save response-router' @pageNotfoUnd

Allen Bert 10.09.2018 09:36

this.props.history.push ('/ HomePage') или может следовать тегу <Link />

pageNotfoUnd 10.09.2018 09:38
5
3
38 414
3

Ответы 3

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

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

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

<Redirect to="/HomePage" /> 

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

window.location = '/HomePage';

не делайте window.location. Вы потеряете состояние приложения

Sakhi Mansoor 10.09.2018 09:37

@SakhiMansoor Да, я знаю, но, возможно, ему нужно просто перенаправить

Omid Nikrah 10.09.2018 09:38

Мы не так реагируем.

Sakhi Mansoor 10.09.2018 09:41

Это отлично работает, особенно когда this.props не определен. Я взял переменную состояния по умолчанию, ее значение false при нажатии кнопки делает ее истинной, и при рендеринге я поставил условие, если условие выполнено, перенаправление работает !! БУМ!

Shashank Shah 03.04.2020 12:01

JSX

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

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

Программно

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

Сделай что-нибудь вроде этого

Чтобы проверить, почему не работает, вы можете console.log() свой реквизит, и вы увидите, что history не появится, так как тогда вы можете это исправить? Что ж, это просто, у вас есть два пути:

withRouter HOC

Using withRouter You can get access to the history object’s properties and the closest 's match via the withRouter higher-order component. withRouter will pass updated match, location, and history props to the wrapped component whenever it renders.

props.history.push('/path')

Пример:

import React from 'react';
import {withRouter} from 'react-router-dom';

function App({ history }) {
  return (
    <div>
      <button onClick={() => history.push('/signup')}>
        Signup
      </button>
    </div> 
  );
}

export default withRouter(App)

Компонент <Redirect />

Rendering a <Redirect> will navigate to a new location. The new location will override the current location in the history stack, like server-side redirects (HTTP 3xx) do.

Пример:

import React from 'react';
import {Redirect} from 'react-router-dom';

class Register extends React.Component {
  state = { toDashboard: false }

  handleSubmit = (user) => {
    saveUser(user).then(() => this.setState(() => ({ toDashboard: true })));
  }

  render() {
    if (this.state.toDashboard) {
      return <Redirect to='/dashboard' />
    }

    return (
      <div>
        <h1>Register</h1>
        <Form onSubmit={this.handleSubmit} />
      </div>
    )
  }
}

Надеюсь, это поможет вам, ребята!

Другие вопросы по теме