react-router 4 и перенаправление программно

avatar
Craig
8 апреля 2018 в 04:31
575
1
4

Я пытаюсь перенаправить пользователя туда, откуда он пришел, при переходе к компоненту входа. На данный момент, на самом деле, я был бы рад просто перенаправить на известный URL-адрес. В данном случае '/dashboard'.

Мое приложение начинается с app.js, а маршруты определены как:

render() {
        return (
            <div>
                <Router>
                    <div>
                    <Navbar />
                        <Route exact path='/' component={Home}  />
                        <Route path='/about' component={About} />
                        <Route path='/contact' component={Contact} />
                        <Route path="/login" component={Login} />
                        <Route path="/register" component={Register} /> 
                        <Route path="/profile" component={Profile} />
                        <Route path="/dashboard" component={Dashboard} />
                        <Route path="/accounts" component={AccountList} />
                        <Route path="/account" component={Account}/>
                    </div>
                </Router>
            </div>
        )
    }

Я перешел на страницу входа, и пользователь ввел свои учетные данные. Я проверил вызов WebAPI и добился успеха. Итак, я хочу перенаправить.

Я делаю это:

message = "Welcome, " + Auth.Auth.firstname();
history.push("/dashboard");

Мой импорт для моего экрана входа в систему:

import history from '../../helpers/history.js';

Где history.js просто:

import createHistory from 'history/createHashHistory'
export default createHistory();

Отправка выполнена, но экран не обновляется. URL-адрес просто обновляется до:

.

http://localhost:8080/login#/dashboard

Если я нажму кнопку навигации "Панель инструментов", URL-адрес изменится на:

http://localhost:8080/dashboard

и на моем экране загружается информационная панель.

Как я должен перенаправлять, проблематично, когда мне нужно?

Источник
Moti Korets
8 апреля 2018 в 04:42
0

Почему вы используете createHashHistory? А не import { createHistory } from 'history'

Craig
8 апреля 2018 в 05:20
0

Я не уверен. Я пытался следовать чьим-то инструкциям, но это, похоже, не работает. Должен ли я изменить файл history.js, чтобы использовать history/createHistory?

Moti Korets
8 апреля 2018 в 05:23
0

createHashHistory предназначен для управления URL-адресами с использованием #, как в вашем примере http://localhost:8080/login#/dashboard, и createHistory для обычных URL-адресов, таких как http://localhost:8080/dashboard.

Craig
8 апреля 2018 в 05:34
0

Когда я изменяю свой history.js, чтобы использовать createHistory (удалить «хэш»), я получаю «_history.createHistory) не является функцией».

Andy Hoffman
8 апреля 2018 в 05:53
0

@Craig Я думаю, вам нужно использовать: this.props.history.push('/dashboard');. Я также не верю, что вам вообще нужно импортировать историю, так как вы должны получить к ней доступ бесплатно.

Ответы (1)

avatar
Liam
8 апреля 2018 в 05:59
2

Вам нужно настроить компонент withRouter, затем использоватьthis.props.history.push('/dashboard')

нет необходимости импортировать историю из '../../helpers/history.js';

Подробнее о withRouter

Вы можете получить доступ к свойствам объекта истории и ближайшему сопоставляется через компонент более высокого порядка withRouter. withRouter будет передавать обновленные сведения о совпадении, местоположении и истории в обернутый компонент всякий раз, когда он отображается.

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

class AppA extends React.Component {
  componentDidMount(){
    setTimeout(()=>{
      this.props.history.push("/b");
    },1000)
  }
  render() {
    return (
      <div>
        <h1> Component A will redirect after 1 sec </h1>
      </div>
    )
  }
}
export default withRouter(AppA);

Edit kk8pj61y0o

Andy Hoffman
8 апреля 2018 в 06:04
0

Вам не нужно импортировать withRouter и можно импортировать export default AppA;. Если вы измените код CodeSandbox, удалив withRouter, вы увидите, что он работает точно так же.

Liam
8 апреля 2018 в 06:15
0

@AndyHoffman Да, но если в реквизитах приложения нет экземпляра Router, который дает Cannot read property 'push' of undefined.

Craig
8 апреля 2018 в 08:37
0

Спасибо, парни. Это сработало отлично. Должен ли я использовать withRouter?

Liam
8 апреля 2018 в 09:35
1

@Craig Я предпочитаю, чтобы вы использовали withRouter, чтобы избежать проблем в будущем.