Открыть модал в React Router - PullRequest
Новая
       29

Открыть модал в React Router

0 голосов
/ 09 апреля 2020

В моем реактивном проекте это мое приложение . js: 

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Modal from "./Modal";

export default function BasicExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
        </ul>
        <hr />
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/modal">
            <Modal />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return (
    <div>
      <h2>Home</h2>
      <p>
        Please <Link to="/modal/1">Click Here</Link> for see details.
      </p>
    </div>
  );
}

Когда вы нажимаете "Click Here", модал был открыт, но моя домашняя страница будет исчезать. как открыть этот мод, не разрушив домашнюю страницу?

ДЕМО ЗДЕСЬ: https://codesandbox.io/s/react-router-basic-2g9t1

1 Ответ

0 голосов
/ 09 апреля 2020

Модалы не должны находиться в маршруте, так как они должны быть сверху другой страницы, а не на полках страницы. Если вам нужно мое мнение, я бы посоветовал вам поместить модал на любую из страниц и проконтролировать, открыт он или нет с состоянием реакции: 

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Modal from "./Modal";

export default function BasicExample() {
  return (
    <Router>
      <div>
        <Switch>
          <Route exact path="/" component={Home} />
        </Switch>
      </div>
    </Router>
  );
}

    const Home = () => {
    const [ isModalOpened, setModalOpened ] = useState(false);

      return (
        <div>
          <h2>Home</h2>
          <button onClick={() => setModalOpened(!isModalOpened)}
          <Modal isOpened={isModalOpened}>
              ...modal content here
          </Modal>
        </div>
      );
    }

И ваш модальный компонент должен выглядеть примерно так : 

const Modal = ({ isOpened, children }) => (
    <div>
        {
            isOpened &&
                { children }
        }
    </div>

)

Если это поможет, обязательно отметьте его как хороший ответ!

...