Когда я отправляю форму входа пользователя, я хочу, чтобы моя веб-страница была перенаправлена - PullRequest
Новая
       12

Когда я отправляю форму входа пользователя, я хочу, чтобы моя веб-страница была перенаправлена

0 голосов
/ 29 февраля 2020

Я работаю над созданием веб-сайта, который имеет две страницы. Домашняя страница и страница панели администратора.

Я использую стек MERN.

В настоящее время, когда я нажимаю ссылку администратора на панели навигации, он запрашивает у пользователя имя и пароль, а если пользователь введите правильные учетные данные, а затем появится предупреждение «Добро пожаловать». (Я использовал предупреждение, чтобы проверить, работает ли мой onSubmit.) В любом случае идея заключается в том, чтобы после нажатия кнопки пользователь перенаправлялся на страницу моей панели администратора. Отправить.

Вещи, которые я пробовал:

  • после успешных учетных данных и отправки, я попытался вернуть компонент панели администратора

  • при Успешные учетные данные и отправить, я попытался вернуть ссылку с to = "/ admin" с Reaction-router-dom

Вещи, которые мне нужны:

  • бэкэнд для получения запроса? Как сообщение или запрос на получение? Я не слишком знаком с бэкендом, поэтому я не уверен, что мне это нужно для завершения.

Спасибо, надеюсь, это было понятно.

Ответы [ 2 ]

0 голосов
/ 29 февраля 2020

Как вы сказали, что используете React Router Dom, у вас будет доступ к объекту history в компонентах вашего компонента.

Предполагается, что ваш компонент входа выглядит примерно так: 

<h2>Login Here!</h2>
<Button className="btn btn-primary" onClick={this.login}>
    Sign in
</Button>

Затем после нажатия кнопки входа будет вызвана функция login. А в функции login вы можете получить что-то вроде этого: 

this.authenticateUser.then(() => {
     // do stuff you want to do after successful login
     this.props.history.push("/admin") // this is what you need
});

Оберните ваш компонент с помощью export default withRouter(LoginPage), чтобы получить доступ к history prop.

Don не забудьте импортировать import {RouteComponentProps, withRouter} from 'react-router-dom';

Поскольку я не знаю, как выглядит ваш код, это лучшее, что я могу придумать.

Надеюсь, это поможет.

0 голосов
/ 29 февраля 2020

Самый простой способ - перенаправить вручную через window.location = <url>, но если вы не используете SSR или серверную часть с каким-либо решением для маршрутизации, вам нужно сделать его, если вам не нужен SSR (рендеринг на стороне сервера), подумайте о добавлении маршрутизация на ваш express сервер. Предположим, что вы используете React-Router. Следующим кодом будет код, который вам нужно использовать в своем бэкэнде (это просто пример, выясните что-то для себя) 

const express = require('express');
const path = require('path');

const app = express();

// Serve the static files from the React app
app.use(express.static(path.join(__dirname, 'client/build')));

// An api endpoint that returns a short list of items
app.get('/api/getList', (req,res) => {
    var list = ["item1", "item2", "item3"];
    res.json(list);
    console.log('Sent list of items');
});

// Handles any requests that don't match the ones above
app.get('*', (req,res) =>{
    res.sendFile(path.join(__dirname+'/client/build/index.html'));
});

const port = process.env.PORT || 5000;
app.listen(port);

console.log('App is listening on port ' + port);

Ссылка для объяснения источника: Развертывание приложение React с React-Router и Express Backend !

...