Использование Redirect внутри реагирующего маршрутизатора модального - PullRequest
Новая
       24

Использование Redirect внутри реагирующего маршрутизатора модального

0 голосов
/ 21 мая 2019

Я использую react-router и react-router-modal для отображения модальной страницы. Внутри модальной формы есть форма, и как только пользователь правильно заполняет форму и нажимает кнопку «Отправить», я хочу перенаправить пользователя на другой маршрут, передавая информацию формы.

Они могут просматривать модальные на /, но как только они отправят форму, я бы хотел перенаправить на /poll. Я вижу изменение URL-адреса на localhost:3000/poll, но содержимое на странице является содержимым /, а не страницы опроса.

App.js 

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense, lazy } from 'react';
import { ModalContainer } from 'react-router-modal';
import './App.css'; 

const Home = lazy(() => import('./routes/Home'));
const Poll = lazy(() => import('./routes/Poll'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route path="" component={Home} />
        <Route path="/poll/:id" component={Poll}/>
        <Route path="/poll" component={Poll}/>
      </Switch>
      <ModalContainer />
    </Suspense>
  </Router>
);

export { App as default };

NewPoll.js 

import React, { useState, useEffect } from 'react';
import { Redirect } from "react-router";
import { MultiSelect } from 'react-selectize';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { AffiliateSelects } from './../helpers/FormElements';
import { isString, isDate, isAffiliates, topicsChosen, validateNewPollModal } from './../helpers/FormValidator';
import { getTopics } from './../helpers/Hooks';
import close from './../close.svg';

const initialNewPoll = {
  pollName: {valid: true, error: ``, value: ``},
  affiliates: {valid: true, error: ``, value: []},
  startDate: {valid: true, error: ``, value: ``},
  endDate: {valid: true, error: ``, value: ``},
  topics: {valid: true, error: ``, value: []}
};

function NewPoll(props) {
  // This function is the rendered content of the modal, and works fine, so removed to not make this code sample super long
}

export const NewPollModal = (props) => {

  const [newPoll, setNewPoll] = useState(initialNewPoll);
  const [topics, setTopics] = useState([]);

  function onChangeNewPoll(el) {
    // Contains some logic here to validate the form
    if (fieldSet === `createPoll`) {
      // Check to make sure all of the fields are valid
      const isPollValid = validateNewPollModal(newPoll);
      if (isPollValid.valid) {
        // If they are valid, set the state so newPoll.valid is true, which is used below to render the Redirect
        setNewPoll({
          ...newPoll,
          valid: true
        });
      } else {
        // If they are not valid, create errors on the form
        setNewPoll(isPollValid.validPoll);
      }
    }
  }

  if (newPoll.valid) {
    return(
      <Redirect
        to={{
          pathname: "/poll",
          state: {
            pollName: newPoll.pollName.value,
            affiliates: newPoll.affiliates.value,
            startDate: newPoll.startDate.value,
            endDate: newPoll.endDate.value,
            topics: newPoll.topics.value
          }
        }}
      />
    )
  } else {
    return(
      <NewPoll
        state={newPoll}
        topics={topics}
        onChangeHandler={onChangeHandler}
        onCloseHandler={onCloseHandler}
      />
    )         
  }

}

Я не получаю никаких сообщений об ошибках в консоли, и URL-адрес в адресной строке изменяется правильно, он просто по-прежнему отображает содержимое не той страницы.

1 Ответ

0 голосов
/ 22 мая 2019

Похоже, что мой App.js файл неверен. Это должно было быть: 

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense, lazy } from 'react';
import { ModalContainer } from 'react-router-modal';
import './App.css'; 

const Home = lazy(() => import('./routes/Home'));
const Poll = lazy(() => import('./routes/Poll'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/poll/:id" component={Poll}/>
        <Route path="/poll" component={Poll}/>
        <Route path="/new-poll" component={Home}/>
      </Switch>
      <ModalContainer />
    </Suspense>
  </Router>
);

export { App as default };
  1. Мой точный путь к моей корневой странице должен был быть установлен на exact.
  2. Мне пришлось добавить новый маршрут, чтобы покрыть вызываемый модал.

Еще не проверял, прошло ли состояние, но проверим это в следующем.

...