React-router-dom goBack (), как унаследовать prop от другого файла js? - PullRequest
Новая
       7

React-router-dom goBack (), как унаследовать prop от другого файла js?

0 голосов
/ 08 мая 2018

Мой путь к маршруту находится в отдельном файле, который содержит только маршруты, не более того, и это единственный файл, который я импортирую в него React-router-dom. Дело в том, что я хочу указать кнопку в другом js-файле, которая будет выполнять функцию goBack (), но я не хочу импортировать react-router-dom здесь, но наследую prop от основного js-файла. Итак, я добавил в свой App.js следующие строки (это основной файл, в котором есть только маршруты) 

constructor(props) {
        super(props);
        this.goBack=this.goBack.bind(this);
    }

    goBack(){
        this.props.history.goBack();
    }

и кнопка 

<button onClick={this.goBack}>Go Back</button>

Есть ли способ сделать это таким образом, или мне действительно нужно импортировать router-dom и добавить конструктор в другой файл?

1 Ответ

0 голосов
/ 08 мая 2018

Вам не нужно импортировать router-dom в новый файл. Вам просто нужно пропустить history пропеллер до компонента кнопки. В качестве альтернативы, установите опору истории в контекстной или избыточной переменной хранилища - надеюсь, кнопка «Назад» не вложена глубоко в дерево компонентов. Совет: старайтесь, чтобы ваш компонент использовал мелкие реквизиты маршрутизатора в вашем дереве, чтобы избежать прохождения через реквизиты маршрутизатора.

Мой роутер настроен примерно так: 

    <Router>
        <div>
            <Switch>
                <Public exact path="/" component={ConnectedLoginForm} {...props} />
                <Route  path="/recover-password" component={ConnectedRecoverPasswordForm}  />
                <Route  path="/reset-password/:token" component={ConnectedResetPasswordForm} />
                <Route  path="/invite/:token" component={ConnectedAcceptInviteForm} />
                <Public  path="/login" component={ConnectedLoginForm} {...props} />
                <Authenticated path="/:co_id" component={ConnectedMainView} {...props} />
            </Switch>
        </div>
    </Router>

Таким образом, у меня есть доступ к history опоре в моем ConnectedMainView компоненте.

...