javascript - 尝试对单个路径使用多个组件

Question

我正在开发一个 react 应用程序，并且我想在我的根路径上使用几个组件。我想知道在一个组件上渲染然后将该组件链接到我的根目录的最佳实践是什么，或者我是否可以将所有组件添加到我的根路径。

我想将 3 个其他组件添加到根路径。

这是我的 app.js 文件：

import React, { Component } from "react";
import { BrowserRouter, Route } from "react-router-dom";
import Header from "./components/Header";
import EyewearTitle from "./components/EyewearTitle";

import Buy from "./components/Buy";
import './App.css';

class App extends Component {
  render() {
    return (
        <BrowserRouter>
            <div>
                <Header />
                <Route exact path="/" component={EyewearTitle} />
                <Route exact path="/buy" component={Buy} />
            </div>
        </BrowserRouter>
    );
  }
}

export default App;

标签： javascriptreactjs

Answer 1

您应该在单个组件下添加要呈现的所有组件。例如，我可能会使用一个<ShoppingScreen/>组件，并在该屏幕上呈现：

render() {
  return(
    <div className="shopping-screen">
      <ShoppingScreenSideBar/>
      <ShoppingScreenItems/>
    </div>
  );
}