Javascript 反应路由器4渲染错误的路由？

我遇到了一个小问题。我有

Root

组件，其中包含

Switch

和两个

Route

。当用户加载我要呈现初始

的页面时，此路由包含一个组件，其中

路由指向我要显示的库。
当用户单击图像时，路线会发生变化，并根据路线变化生成另一组图像。这正如预期的那样有效。但是当使用
根目录中的第二个
时，路径会改变，但会呈现初始值。由于路径不匹配，即使画廊也不会渲染，但会渲染
标题
和
标题
。怎么做

class Root extends Component {
  render() {
    return (
      <div>
        <Navigation />
        <Switch>
          <Route component={Home} path="/" />
          <Route component={Login} exact path="/login" />
         </Switch>
        <Footer />
      </div>
    );
  }
}

类根扩展组件{
render（）{
返回(
);
}
}

初始路线内的路线

class Home extends Component<Props> {
  _scrollDown = event => {
    event.preventDefault();
    this.gallery.scrollIntoView({ behavior: 'smooth' });
  };

  render() {
    return (
      <div>
        <Header onClick={event => this._scrollDown(event)} />
        <HeaderAbout />
        <Route
          render={props => (
            <div
              ref={node => {
                this.gallery = node;
              }}
            >
              <RelayGallery {...props} />
            </div>
          )}
          path="/home/:galleryRef?"
        />
      </div>
    );
  }
}

class Home扩展组件{
_向下滚动=事件=>{
event.preventDefault（）；
this.gallery.scrollIntoView（{behavior:'smooth'}）；
};
render（）{
返回(
此。_向下滚动（事件）}/>
(
{
this.gallery=节点；
}}
>
)}
path=“/home/：galleryRef？”
/>
);
}
}
像这样更改它

<Route component={Login} exact path="/login" />
<Route component={Home} path="/" />



交换机是唯一的，因为它以独占方式呈现路由。在里面
相比之下，与位置匹配的每个对象都以包含方式渲染

您可以保留您的路线结构，只需将“精确”道具添加到主组件路线。然后路由器将只渲染具有确切“/”路由的组件。
谢谢！我不知道交换机内部的声明顺序很重要，但现在有了意义：）