javascript – 如何在Home Route中正确设置react-router-dom？

我有这个index.js：

<Provider store={store}>
  <Router history={history}>
    <App/>
  </Router>
</Provider>

这个App.js：

<Switch>
  <Route exact path="/" component={Home} />
    <Route
      path="/login"
      render={() => <Login userError={this.state.userError} />}
    />
  <Route path="/registration" component={Registration} />;
</Switch>

和Home.js：

<div className="Home">
  <Header/>
  <div className="content">
    <Sidenav/>
      <Switch>
        <Route path="/friends" component={Friends}/>
      </Switch>
    <Feed/>
  </div>
</div>

我希望Friends组件在内容块中呈现,但是现在如果我尝试通过链接到达/ friends路由,我会得到空白页面.如果我在App.js中设置/ friends Route,那就没问题了,但是我的内容类中没有它,因为它将是另一个页面.

你可以帮我一把吗？

另外在功能中我将有更多项目在内容中显示,这就是我将Switch放入Home.js的原因

提前致谢！

解决方法:

移动您的内容类和< Friends>

您遇到的问题是,当您访问/朋友时,组件Home不会呈现,因为它只会在您转到/时呈现

要解决这个问题,只需将Route移动到App.js文件中,然后将内容类移动到Friends组件中.

为了简化这一过程,您可以将内容类转换为组件.这样你就可以将它包装在你渲染的所有东西周围.

或者移动< Friends>并包装内容

我的意思是你还可以创建自己的Route组件,它包装在Content组件中传递给它的任何组件.它看起来可能类似于：

const ContentRoute = ({ component, ...props }) => (
  <Route {...props} component={() => (
    <Content>
      <component />
    </Content>
  )}>
  </Route>
)

标签：react-router-dom,javascript,reactjs,react-router
来源： https://codeday.me/bug/20190731/1586922.html