라우터 v4 모달 반응

라우터 v4 모달 반응

이전 버전의 Raction Router에서 수행하는 방법은 알고 있지만 새로운 Raction Router v4에서는 전혀 알지 못한다.누가 좀 도와줄래?

내가 원하는 게 뭐야?

1. 브라우저 url에 /image/1을 입력하면 페이지가 정상적으로 나타난다.
2. 클릭할 때<Link>Image as modal</Link>위엄 있게modal: true, 이미지가 있는 모달은 나타나지만 모달 뒤에 있는 모달은 브라우저의 이전 컨텐츠 + url이어야 한다 == /image/1...그러면 F5를 누르면 페이지가 정상적으로 나타난다.

예: 인스타그램...등

내가 뭘 잘못하고 있다고 생각하나?

1. 나는 이전의 내용을 어떻게 표시해야 할지 모르겠다.내가 추측하는 것은 그것뿐이다.

코드 :

const Images = (props) => {
  return (
    <div>
      <h2>Images</h2>
      <ul>
        <li><Link to={{
          pathname: '/image/1',
          state: {
            modal: true
          }
        }}>Image as modal</Link></li>
        <li><Link to="/image/2">Image</Link></li>
      </ul>
    </div>
  )
}

const Image = (props) => {
  return (
    <div>
      <h2>Image {props.match.params.id}</h2>
      <ul>
        <li><Link to="/images">Back to Images</Link></li>
      </ul>
    </div>
  )
}

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <div>
        <Route path='/images' component={Images} />
        <Route path='/image/:id' component={Image} />
      </div>
    </Router>
  </Provider>,
  document.getElementById('digital')
)

나도 같은 문제가 있어서 이렇게 만들었어.

http://npmjs.com/package/react-router-modal

그것은 당신이 루트에 모달스를 부착할 수 있게 해준다.다음과 같이 사용하십시오.

import { ModalContainer, ModalRoute } from 'react-router-modal';
// ... 
ReactDOM.render(
  <Provider store={store}>
    <Router>
      <div>
        <Route path='/images' component={Images} />
        <ModalRoute path='/image/:id' component={Image} />
      </div>
    </Router>
    <ModalContainer />
  </Provider>,
  document.getElementById('digital')
)

https://davidmfoley.github.io/react-router-modal-examples/에는 몇 가지 간단한 예가 있다.

도움이 되길 바래.

여기서 설명한 솔루션을 사용할 수 있었는데, 이 코드 예는 다음과 같다.

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

// This example shows how to render two different screens
// (or the same screen in a different context) at the same url,
// depending on how you got there.
//
// Click the colors and see them full screen, then "visit the
// gallery" and click on the colors. Note the URL and the component
// are the same as before but now we see them inside a modal
// on top of the old screen.

class ModalSwitch extends React.Component {
  // We can pass a location to <Switch/> that will tell it to
  // ignore the router's current location and use the location
  // prop instead.
  //
  // We can also use "location state" to tell the app the user
  // wants to go to `/img/2` in a modal, rather than as the
  // main page, keeping the gallery visible behind it.
  //
  // Normally, `/img/2` wouldn't match the gallery at `/`.
  // So, to get both screens to render, we can save the old
  // location and pass it to Switch, so it will think the location
  // is still `/` even though its `/img/2`.
  previousLocation = this.props.location;

  componentWillUpdate(nextProps) {
    let { location } = this.props;

    // set previousLocation if props.location is not modal
    if (
      nextProps.history.action !== "POP" &&
      (!location.state || !location.state.modal)
    ) {
      this.previousLocation = this.props.location;
    }
  }

  render() {
    let { location } = this.props;

    let isModal = !!(
      location.state &&
      location.state.modal &&
      this.previousLocation !== location
    ); // not initial render

    return (
      <div>
        <Switch location={isModal ? this.previousLocation : location}>
          <Route exact path="/" component={Home} />
          <Route path="/gallery" component={Gallery} />
          <Route path="/img/:id" component={ImageView} />
        </Switch>
        {isModal ? <Route path="/img/:id" component={Modal} /> : null}
      </div>
    );
  }
}

const IMAGES = [
  { id: 0, title: "Dark Orchid", color: "DarkOrchid" },
  { id: 1, title: "Lime Green", color: "LimeGreen" },
  { id: 2, title: "Tomato", color: "Tomato" },
  { id: 3, title: "Seven Ate Nine", color: "#789" },
  { id: 4, title: "Crimson", color: "Crimson" }
];

function Thumbnail({ color }) {
  return (
    <div
      style={{
        width: 50,
        height: 50,
        background: color
      }}
    />
  );
}

function Image({ color }) {
  return (
    <div
      style={{
        width: "100%",
        height: 400,
        background: color
      }}
    />
  );
}

function Home() {
  return (
    <div>
      <Link to="/gallery">Visit the Gallery</Link>
      <h2>Featured Images</h2>
      <ul>
        <li>
          <Link to="/img/2">Tomato</Link>
        </li>
        <li>
          <Link to="/img/4">Crimson</Link>
        </li>
      </ul>
    </div>
  );
}

function Gallery() {
  return (
    <div>
      {IMAGES.map(i => (
        <Link
          key={i.id}
          to={{
            pathname: `/img/${i.id}`,
            // this is the trick!
            state: { modal: true }
          }}
        >
          <Thumbnail color={i.color} />
          <p>{i.title}</p>
        </Link>
      ))}
    </div>
  );
}

function ImageView({ match }) {
  let image = IMAGES[parseInt(match.params.id, 10)];

  if (!image) return <div>Image not found</div>;

  return (
    <div>
      <h1>{image.title}</h1>
      <Image color={image.color} />
    </div>
  );
}

function Modal({ match, history }) {
  let image = IMAGES[parseInt(match.params.id, 10)];

  if (!image) return null;

  let back = e => {
    e.stopPropagation();
    history.goBack();
  };

  return (
    <div
      onClick={back}
      style={{
        position: "absolute",
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
        background: "rgba(0, 0, 0, 0.15)"
      }}
    >
      <div
        className="modal"
        style={{
          position: "absolute",
          background: "#fff",
          top: 25,
          left: "10%",
          right: "10%",
          padding: 15,
          border: "2px solid #444"
        }}
      >
        <h1>{image.title}</h1>
        <Image color={image.color} />
        <button type="button" onClick={back}>
          Close
        </button>
      </div>
    </div>
  );
}

function ModalGallery() {
  return (
    <Router>
      <Route component={ModalSwitch} />
    </Router>
  );
}

export default ModalGallery;

모든 라우팅 시스템과 함께 사용할 수 있는 자바스크립트가 포함된 간단한 모달 경로 예

<button onClick={() => {
    this.setState({ modal: true });
    window.history.pushState("","","/gallery/image/img_1233")
}}>
    Open Modal
</button>

//Link Button
<Link href="/gallery/image/img_1233">
    <a>Open Page</a>
</Link>

전체 예: https://github.com/mohammad-amin-hesam/react-modal-route-example

참조URL: https://stackoverflow.com/questions/42409175/react-router-v4-modal