Reactjs：将补充工具栏组件导入到其他页面

Question

我没有反应的经验，我正在尝试通过做/构建来教自己。我想在我的网站页面上添加侧边栏。但是，我的所有研究都导致了将侧栏添加到首页的文章和教程。我不希望它出现在首页上，而只是一页。我要使用的外观是Strip API documentation页面：

如果我只能在页面上看到侧栏，则可以尝试按照自己喜欢的方式对其进行样式设置。以下是我的文件。

component Sidebar.js

import React, { Component } from "react";



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

我要在“ Developer.js”上添加侧边栏的页面：

import React, { Component } from 'react'
import Sidebar from './components/Sidebar' 


class Sidebar extends Component {
    render() {
        return (
            <div className="Sidebar">
            <Sidebar />
            </div>
        )
    }
}


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

我知道class Sidebar extends Component不是正确的导入方式。我只是不知道正确的方法是什么。

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;

Answer 1

是，首先，您的组件配置不正确。修复它非常重要。让我们从sidebar.js开始。