Javascript Reactjs：将侧边栏组件导入到其他页面

我没有react方面的经验，我试图通过做/构建来自学。我想在我的网站上添加一个侧边栏。然而，我所有的研究都产生了一些文章和教程，在主页上添加了侧栏。我不希望它出现在主页上，只有一页。我想要的外观是第页：

如果我能在页面上找到侧边栏，那么我可以试着按照我喜欢的方式来设计它。下面是我的档案

组件侧栏.js

import React, { Component } from "react";
import '../Styles/sidebar.css'


class Sidebar extends Component {
    render() {
        return(
            <div className="sidebar">
            <h1> I'm the sidebar</h1>
            </div>
        );
    }
}
export default Sidebar;

app.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Home } from './Home';
import { Developers } from './Developers';
import { NoMatch } from './NoMatch';

class App extends Component {
  render() {
    return (
      <React.Fragment>
        <NavigationBar />
        <Layout>
          <Router>
            <Switch>
              <Route exact path = "/" component={Home} />
              <Route path="/developers" component = {Developers} />
              <Route component={NoMatch} /> 
            </Switch>
          </Router>
        </Layout>
      </React.Fragment>
    );
  }
}


export default App;

import React，{Component}来自'React'；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
从“/Home”导入{Home}；
从“/Developers”导入{Developers}；
从“/NoMatch”导入{NoMatch}；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

添加了css文件后，

I'm侧边栏就显示在
文档的正上方

它不在“侧栏”中，我缺少什么？
是的，首先是组件配置不正确。修理它很容易。让我们从
sidebar.js
开始

//sidebar.js
import React, { Component } from "react";
import './style.css'
export default class Sidebar extends Component {
  render() {
    return (
      <div className="sidebar-container">
        <div className="sidebar">
          <a className="sidebar-link">Link</a>
          <a className="sidebar-link">Link</a>
          <a className="sidebar-link">Link</a>
        </div>
      </div>
    );
  }
}

更新：在你的
sidebar.js
中导入这个文件，就像
Import./style.css
一样。我已经更新了
sidebar.js
文件的代码。请检查一下

//style.css
.sidebar-container{
    min-height: 100vh;
    background-color: lightgray;
  }
  .sidebar {
    width: 200px;
    padding-top: 25px;
    display: flex;
    flex-direction: column;
  }

  .sidebar-link{
    padding: 10px;
  }

  .sidebar-link:hover{
    border-right: 5px solid dimgray;
    background-color: gainsboro;
  }

是的，首先，您的组件配置不正确。修理它很容易。让我们从
sidebar.js
开始

//sidebar.js
import React, { Component } from "react";
import './style.css'
export default class Sidebar extends Component {
  render() {
    return (
      <div className="sidebar-container">
        <div className="sidebar">
          <a className="sidebar-link">Link</a>
          <a className="sidebar-link">Link</a>
          <a className="sidebar-link">Link</a>
        </div>
      </div>
    );
  }
}

更新：在你的
sidebar.js
中导入这个文件，就像
Import./style.css
一样。我已经更新了
sidebar.js
文件的代码。请检查一下

//style.css
.sidebar-container{
    min-height: 100vh;
    background-color: lightgray;
  }
  .sidebar {
    width: 200px;
    padding-top: 25px;
    display: flex;
    flex-direction: column;
  }

  .sidebar-link{
    padding: 10px;
  }

  .sidebar-link:hover{
    border-right: 5px solid dimgray;
    background-color: gainsboro;
  }

首先，您的边栏组件可以简化为功能组件：

// Sidebar.js

import React from "react";

export const Sidebar = () => <div className="sidebar">I'm the sidebar!</div>;

// Developers.js

import React from "react";
import { Sidebar } from "./components/Sidebar";

export const Developers = () => (
    <div>
        <Sidebar />
        <h1> Documentation </h1>
    <div>
);


首先，您的边栏组件可以简化为功能组件：

// Sidebar.js

import React from "react";

export const Sidebar = () => <div className="sidebar">I'm the sidebar!</div>;

// Developers.js

import React from "react";
import { Sidebar } from "./components/Sidebar";

export const Developers = () => (
    <div>
        <Sidebar />
        <h1> Documentation </h1>
    <div>
);


这让人困惑，在Developer.js中，您导入了侧栏，还创建了一个名为Sidebar的类。您的类侧边栏正在呈现侧边栏！我知道是这样的，因为我不确定要如何将侧边栏导入到开发人员页面中。这让人困惑，在developer.js中，您导入侧边栏，还创建了一个名为侧边栏的类。您的类侧边栏正在呈现侧边栏！我知道是这样的，因为我不确定要如何将侧边栏导入开发者页面。我这样做了，“我是侧边栏”只显示在
文档的上方。我需要做什么，使它成为一个“边栏”？好吧，对于初学者来说，你可以使用
flexbox
或
grids
将组件设计成类似容器的样式。另一种选择是使用UI框架，如Bootstrap和Semantic UI，它们已经有了现成的边栏组件用于React。好吧然后像这样导入它<代码>从“/Developers”导入开发人员
是的。我只是想为你模拟一个侧边栏<代码>CSS

样式设计非常重要。希望你能弄明白。干杯我这样做了，“我是侧边栏”显示在

文档的上方。我需要做什么，使它成为一个“边栏”？好吧，对于初学者来说，你可以使用
flexbox
或
grids
将组件设计成类似容器的样式。另一种选择是使用UI框架，如Bootstrap和Semantic UI，它们已经有了现成的边栏组件用于React。好吧然后像这样导入它<代码>从“/Developers”导入开发人员

是的。我只是想为你模拟一个侧边栏<代码>CSS样式设计非常重要。希望你能弄明白。干杯我这样做了，“我是侧边栏”显示在

文档的上方。我需要做什么，才能使它成为一个“侧边栏”@MaxxABillion你需要使用
css
将其设置为一个侧边栏。我编辑了我的文章以反映css。它仍然没有显示在侧面。我这样做了，“我是侧边栏”只是显示在
文档的上方。我需要做什么，才能使它成为一个“侧边栏”@MaxxABillion你需要使用
css
将其设置为一个侧边栏。我编辑了我的文章以反映css。它仍然没有出现在侧面。
src/
   app.js
   Developers.js
   components/
      Sidebar.js