React路由器4呈现错误的路线？答案

【问题标题】：React router 4 renders wrong route?React路由器4呈现错误的路线？
【发布时间】：2018-08-19 06:07:33
【问题描述】：

我遇到了一个小问题。我有Root 组件，其中包含Switch 和两个Route。当用户加载页面时，我要呈现初始的<Route path="/" /> 此路由包含一个组件，其中Route 指向我要显示的画廊。当用户单击图像时，路线会发生变化，另一组图像会根据路线变化而发生变化。这按预期工作。但是当使用Root 内的第二个<Route path="/login" /> 时，路径会发生变化，但会呈现初始路径。由于路径不匹配，即使是画廊也没有渲染，但渲染了Header 和HeaderAbout。怎么样？

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

初始路线内

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>
    );
  }
}

【问题讨论】：

标签： javascript reactjs ecmascript-6 react-router

【解决方案1】：

这样改

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

Switch 的独特之处在于它只呈现一条路线。在相比之下，与位置匹配的每个都以包容性方式呈现。

【讨论】：

谢谢！我不知道 switch 内部的声明顺序很重要，但现在很有意义:)

【解决方案2】：

您可以保留您的路由结构，并将“精确”道具添加到您的主组件路由中。然后路由器将只渲染具有确切 '/' 路由的组件。

【讨论】：