Question

我正在使用react-router和react-router-modal在页面上显示模式。模态内部有一个表单，一旦用户正确填写了表单并单击Submit按钮，我希望在传递表单信息的同时将用户重定向到其他路线。

他们可以在/处查看模式，但是一旦提交表单，我想重定向到/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正确更改，它仍在显示错误页面的内容。

Answer 1

好像我的 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 };

我的根页面的确切路径应设置为exact。
我不得不添加一条新路线来覆盖被调用的模式。

尚未进行测试以查看状态是否通过，但接下来将进行检查。

在react-router-modal内部使用重定向

1 个答案: