Reactjs 将页面路由到组件：React

我有3个组件：

Header.js

，

Main.js

，和

Footer.js

，而

App.js

类似于

const App = () => {
   <Header/>
   <Main/>
   <Footer/>
}

但是它不允许我，说我不能在路由器外面使用

Link

，我在

Header.js

中使用

Link

。我怎样才能做到这一点

Header.js

如下

const Header = () => {
  return (
    <div>
      <ul>
        <li>
          <Link to="/">
            About
          </Link>
        </li>
        <li>
          <Link to="/projects">
            Projects
          </Link>
        </li>
      </ul>
    </div>
  )
}

const头=（）=>{
返回(


关于


项目


)
}

您只需确保您的

路由器

组件围绕任何正在进行路由的组件即可。为简单起见，这里是围绕应用程序级别的整个应用程序的路由器

const App = () => {
  <Router>
    <Header/>
    <Main/>
    <Footer/>
  </Router>
}

const-App=（）=>{
}

编辑：确保将组件正确传递到管线：

const Main = () => {
 <Switch>
    <Route exact path='/' component={About} />
    <Route exact path='/projects' component={Projects} />
 </Switch>
}

const Main=（）=>{
}

您正在使用react路由器吗？如果是这样，您的

路由器组件在哪里？请参阅更新的问题，您应该能够将路由器组件提升到应用程序级别，并确保它同时包围您的标题和主标题。但在这种情况下，所选页面将不会出现在我希望它出现的空间中。基本上，页眉和页脚是不变的，但主要的变化。这就是我想要实现的。好的，关于
开关
和
路由
呢。我可以把它们保存在
Main.js
中吗？是的。那应该很好。路由器组件不指定路由渲染的位置，这是路由组件渲染它的地方，但没有实现我想要的。
Main.js
组件中没有显示任何内容！！哦，我想你只是想说一下组件道具中的项目。确保正确导入它们。About.js和Project.js不正确是的，基本上我想在
Main.js
中包含
About.js
和
Projects.js
作为
{props.children}
，但我不确定在单击标题中相应的
链接时如何在它们之间切换。我需要为此使用全局状态吗？
const Main = () => {
 <Switch>
    <Route exact path='/' component={About} />
    <Route exact path='/projects' component={Projects} />
 </Switch>
}