javascript - Reactjs:将侧边栏组件导入到不同的页面

Question

我没有反应经验，我正在尝试通过实践/构建来自学。我想向我网站的页面添加侧边栏。然而，我所有的研究都导致了将侧边栏添加到主页的文章和教程。我不想让它出现在主页上，只需要一页。我想要的外观和感觉是 Strip API documentation页面:

如果我可以在页面上获得侧边栏，那么我可以尝试按照我喜欢的方式设置它的样式。以下是我的文件。

组件Sidebar.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;

我想将侧边栏放在“Developer.js”上的页面:

import React from 'react';
import Sidebar from './components/Sidebar' 
import './Styles/sidebar.css'


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

export default Developers; 

我对 sidebar.css 的看法:

.sidebar-container{
    min-height: 100vh;
    background-color: lightgray;
  }
  .sidebar {
    width: 200px;
    padding-top: 25px;
  }

  .sidebar-link{
    padding: 10px;
  }

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

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;

添加 css 文件后，我是侧边栏 就显示在文档 的正上方

它不在“侧边栏”中，我错过了什么？

Answer 1

是的，首先您的组件配置不正确。修复它非常容易。让我们从 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>
    );
  }
}

//Developer.js
import React, { Component } from "react";
import Sidebar from "./Sidebar";

class Developer extends Component {
  render() {
    return (
      <div style={{ display: "flex" }}>
        <Sidebar />
        <h1>Developer Page</h1>
      </div>
    );
  }
}

export default Developer;

此外，在您的 App.js 文件中，您将作为命名组件导入。这就是您没有获得所需输出的原因。如果您要导入命名组件，则也必须以相同的方式导出它们。目前，您默认导出它们，因此导入它们时不需要大括号。

//App.js
import  Home  from './Home';
import  Developers  from './Developer';
import  NoMatch  from './NoMatch';

更新:将此文件导入到 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;
  }