Question

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

Answer 1

像这样改变

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

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

Answer 2

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

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

2 个答案: