Question

（我使用的是最新版本的React，React-Router和React-Aria-Modal）

我正在尝试创建像Pinterest或Product Hunt上看到的路由行为。对于那些不熟悉的人来说，它归结为在预览模式下拥有Feed of Things（针脚，产品等）。点击该名称或某些“查看更多”＆＃39;在该预览中链接，以模态打开事物并相应地更改路线。如果我要复制粘贴该URL或刷新页面，那么Thing现在呈现为页面。

所以，在＆＃39;查看更多＆＃39; Link组件，我设置状态（view = Modal）并在Thing组件中查看是否要在模态中渲染。

所以，基本上：

<App>
  <Feed>
    {things.map((thingId) => <Thing id={thingId} />)}
  </Feed>
</App>

在Thing内，它大致如下所示：

renderThing() {
  return (
    <div>
      <Name />
      <Link 
        to={"/things/ + this.props.id} 
        state = {{
          view: "Modal"
        }}
      > 
        View More 
      </Link>
    </div>
  );
}

render() {
  if(this.state.view == 'Modal'){
    return (<AriaModal>{renderThing()</AriaModal>);
  } else {
    return renderThing();
  }
}

我遇到一个问题，现在当模态显示时，点击链接时页面背景消失了。我想这是由于点击链接导航。

React-Router有一个example like this可以解决这个问题，但也存在一些问题。它们似乎基本上将之前的孩子存储在App级别，并且除了请求的模态/路线之外还要渲染它 - 基本上导致重新渲染整个饲料，既不感觉也不干净。

此外，如果＆＃39; Next / Previous＆＃39;要设置样式交互，似乎每次路由器状态更新时都会加载整个背景，方法是单击“下一个/上一个”＆＃39;这也觉得没必要。

所以，我想知道如何最好地考虑设置它 - 以便前一页仍显示在后台并且路线也会更新。

任何想法都会受到超级赞赏！

Answer 1

我写了CodePen that demonstrates Pinterest routing。它使用Navigation router而不是React路由器，但我希望你对此持开放态度。您可以看到，如果填充了oldState，则列表可见，我将渲染到模态div中。如果oldState为空，则列表不可见，我将渲染到容器div中。您可以通过在新选项卡中打开其中一个超链接来尝试此操作。如果您对代码有任何疑问，请告诉我们。

var {StateNavigator} = Navigation;
var {NavigationLink} = NavigationReact;

var Thing = ({thing}) => <h2>{thing}</h2>;

var Things = ({things, stateNavigator}) => (
  <div>
    <ul>
      {things.map(thing => 
        <li key={thing}>
          <NavigationLink
            stateKey="thing"
            navigationData={{thing: thing}}
            stateNavigator={stateNavigator}>
            {thing}
          </NavigationLink>
        </li>
      )}
    </ul>
    <div id="modal"></div>
  </div>
);

var stateNavigator = new StateNavigator([
  {key: 'things', route: ''},
  {key: 'thing', route: 'thing'}
]);

var THINGS = ['one', 'two', 'three', 'four', 'five'];

stateNavigator.states.things.navigated = () => {
  ReactDOM.render(
    <Things things={THINGS} stateNavigator={stateNavigator} />,
    document.getElementById('container')
  );
};

stateNavigator.states.thing.navigated = (data) => {
  var oldState = stateNavigator.stateContext.oldState;
  ReactDOM.render(
    <Thing thing={data.thing} />,
    document.getElementById(oldState ? 'modal' : 'container')
  );
};

stateNavigator.start();

Pinterest产品搜索策略模式和路由

1 个答案: