Reactjs 每当我点击侧边栏中的任何链接（如关于、工作、联系等），该特定组件都应该在内容组件内打开

React Router新手，我的问题是如何在已经呈现的其他布局中呈现特定组件（我有两个组件侧栏和我想要的内容，如果我单击侧栏中的任何链接，我们将在已呈现内容组件中呈现该组件，而不是覆盖该组件）

////////////Sidebar.js////////////
从“React”导入React
从“react router dom”导入{BrowserRouter，Link}
从“../images/personal.gif”导入PersonalImg
常量边栏=（）=>{
返回(

关于
工作
技巧
接触

)
}
导出默认边栏；
内容组件。。。
/////////////////Content.js//////////////////
从“React”导入React
从“react router dom”导入{BrowserRouter，Route}
从“./About”导入关于
从“/Skills”导入技能
从“./Work”导入工作
从“./Contact”导入联系人
常量内容=（道具）=>{
返回(
)
}
导出默认内容；
这就是App.js呈现这些组件的方式
render（）{
返回(
)
}

在这里，我为您创建了一个小演示

问题1：

componet

拼写错误。它应该是

路线中的
组件

问题2：像这样为第一条路线设置
精确的
关键字

在整个应用程序中使用single
BrowserRouter
。
在这种情况下，您根本不需要路由。您可以在单个页面上呈现所有组件，并将状态保持为单击链接/按钮时显示隐藏。OP不需要修复代码，他不需要覆盖组件，但在单击链接时会一个接一个地显示，而不替换现有组件。他只想呈现内容组件内的选定组件。他不想把所有的东西都放在一个组件中。读这个-（我有两个组件侧边栏和我想要的内容，如果我点击侧边栏中的任何链接，我们将在其中呈现该组件，已经呈现内容组件，而不是覆盖该组件）让我们等待他的回复。如果他想要这样的东西，我们会更新它。谢谢@ClueMediator的帮助，它很有效。我刚刚修复了你指出的那些错误。这是我的第一个堆栈溢出问题，你节省了我很多时间…谢谢

////////////Sidebar.js////////////

import React from 'react'
import { BrowserRouter, Link } from 'react-router-dom'
import PersonalImg from '../images/personal.gif'

const Sidebar = () => {
   return (
       <div className="sidebar">
           <BrowserRouter>
               <div className="personal-img">
                   <img src={PersonalImg} alt="personl-img" />
               </div>
               <div className="navigation">
                   <ul className="list">
                       <li><Link to="/about">About</Link></li>
                       <li><Link to="/work">Work</Link></li>
                       <li><Link to="/skills">Skills</Link></li>
                       <li><Link to="/contact">Contact</Link></li>
                   </ul>
               </div>
           </BrowserRouter>
       </div>
   )
}

export default Sidebar;


Content component...
/////////////////Content.js//////////////////

import React from 'react'
import { BrowserRouter, Route } from 'react-router-dom'
import About from './About'
import Skills from './Skills'
import Work from './Work'
import Contact from './Contact'

const Content = (props) => {

   return (
       <div className="content">
           <BrowserRouter>
               <Route path="/" componet={About} />             
               <Route path="/work" componet={Work} />             
               <Route path="/contact" componet={Contact} />             
               <Route path="/skills" componet={Skills} />             
           </BrowserRouter>
       </div>
   )
}

export default Content;

and thats how App.js rendering these components

render() {
   return (
     <Fragment>
         <Sidebar />
         <Content />
     </Fragment>
   )
 }