React路由器4渲染错误的路由?

时间:2018-03-10 22:20:14

标签: javascript reactjs ecmascript-6 react-router

我遇到了一个小问题。我的Root组件包含Switch和两个Route。当用户加载页面时,我想呈现初始<Route path="/" />此路由包含一个Route指向我想要显示的库的组件。 当用户点击图像时,路线改变,并且基于路线的另一组图像改变。这按预期工作。但是当使用<Route path="/login" />内的第二个Root时,路径会发生变化,但会初始化。由于路径不匹配,甚至未呈现图库,但会呈现HeaderHeaderAbout。怎么样?

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

2 个答案:

答案 0 :(得分:1)

像这样改变

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

Switch的独特之处在于它只提供路由。在   相比之下,每一个与位置相匹配的东西都是包含在内的。

答案 1 :(得分:0)

您可以保留自己的路线结构,只需添加“确切的”&#39;支持您的家庭组件路线。然后路由器将只呈现具有确切&#39; /&#39;路由。