Reactjs: импорт компонента боковой панели на другую страницу

Question

У меня нет опыта реагирования, и я пытаюсь научить себя делать / строить. Я хотел бы добавить боковую панель на страницу на моем сайте. Тем не менее, все мои исследования привели к статьям и учебникам, которые добавляют боковую панель на главную страницу. Я не хочу это на главной странице, только одна страница. Внешний вид и стиль, к которому я стремлюсь, - это Документация по Strip API страница:

Если бы я мог просто включить боковую панель страницы, тогда я могу попытаться оформить его так, как мне нравится. Ниже приведены мои файлы.

компонентная боковая панель. 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;

Страница, на которой я хочу разместить боковую панель на вкладке «Разработчик. 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; 

Мой взгляд на боковой панели. 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, I'm the sidebar просто отображается прямо над Documentation

Это не на "боковой панели", что мне не хватает?

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;
  }

Answer 2

Прежде всего, ваш компонент боковой панели можно упростить до функционального компонента:

// 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>
);

Предполагается, что у вас есть следующая структура папок для обеспечения правильной работы импорта:

src/
   app.js
   Developers.js
   components/
      Sidebar.js