尝试将多个组件用于单个路径

时间:2018-06-14 21:08:18

标签: javascript reactjs

我正在开发一个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;

1 个答案:

答案 0 :(得分:3)

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

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