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

Question

我有这个 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 组件在 content block 中呈现，但现在如果我尝试通过 Link 访问 /friends 路由 我得到的是空白页。如果我在 App.js 中设置 /friends 路由，它会没问题，但我不会在我的 content 类中，因为这将是另一页。

你能帮我一下吗？

此外，在功能中，我将在 content 中显示更多项目，这就是为什么我将 Switch 放在 Home.js 中的原因

提前致谢!

Answer 1

移动你的content类和 <Friends>

您遇到的问题是组件 Home当您访问 /friends 时未呈现因为它只会在您转到 / 时呈现

要解决此问题，只需移动 Route进入 App.js 文件，连同 content类(class)进入Friends组件。

为了使这更容易，你可以让你的 content类到组件中。这样您就可以将它包裹在您渲染的所有内容中。

---

或移动<Friends>并包装 content

我的意思是您也可以创建自己的 Route 组件将传递给它的任何组件包装在 Content 中成分。它可能看起来类似于:

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