Javascript 如何在同一页面上单击显示每个组件

我在React中创建了一个简单的菜单，它有四个链接。单击每个链接时，应在菜单下方呈现不同的组件。当前，我的路由器在新页面上显示每个组件，如何使用React路由器在同一页面上单击显示它们？我尝试使用

开关

并移动

浏览器路由器

，但没有成功。以下是菜单组件：

import React, { Component }  from 'react'
import { NavLink } from 'react-router-dom';


class BlogCategoriesMenu extends Component {


  render() {
    return(
        <div className="blog-categories-menu">
        <div className="blog-categories-menu__items">
         <NavLink to="/planets" className="blog-categories-menu__items-a"  activeClassName="isActive">Planets</NavLink>
         <NavLink to="/signs" className="blog-categories-menu__items-a" activeClassName="isActive">Signs</NavLink>
         <NavLink to="/planetary-aspects"  className="blog-categories-menu__items-a" activeClassName="isActive">Planetary Aspects</NavLink>
         <NavLink to="/houses"  className="blog-categories-menu__items-a" activeClassName="isActive">Houses</NavLink>
         <div className="content-container">
         </div>
         </div>
       </div>

    )
  }
} 

export default BlogCategoriesMenu;

import React，{Component}来自“React”
从'react router dom'导入{NavLink}；
类BlogCategoriesMenu扩展组件{
render（）{
返回(
行星
标志
行星方面
房屋
)
}
} 
导出默认博客分类菜单；

以下是我在App.js中设置的路线：

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './components/Home/Home.jsx'
import Error from './components/Error/Error.jsx';
import Blog from './components//Blog//Blog.jsx';
import Post from './components/Post/Post.jsx';
import Planets from './components/Planets/Planets.jsx';
import Signs from './components//Signs/Signs.jsx';
import PlanetaryAspects from './components/PlanetaryAspects/PlanetaryAspects.jsx';
import Houses from './components/Houses/Houses.jsx';

const App = () => {

  return (
   <BrowserRouter>
   <Switch>
   <Route path="/" component={Home} exact />
   <Route path="/blog" component={Blog} exact/>
   <Route path="/post/:id" component={Post} exact/>
   <Route path="/planets" component={Planets}></Route>
   <Route path="/signs" component={Signs}></Route>
   <Route path="/planetary-aspects" component={PlanetaryAspects}></Route>
   <Route path="/houses" component={Houses}></Route>
   <Route component={Error}/>
   </Switch>
   </BrowserRouter>
  );
};

export default App;

从“React”导入React；
从“react router dom”导入{BrowserRouter，Route，Switch}；
从“./components/Home/Home.jsx”导入Home
从“./components/Error/Error.jsx”导入错误；
从“./components//Blog//Blog.jsx”导入日志；
从“/components/Post/Post.jsx”导入Post；
从“./components/Planets/Planets.jsx”导入行星；
从“./components//Signs/Signs.jsx”导入符号；
从“./components/PlanetaryAspects/PlanetaryAspects.jsx”导入PlanetaryAspects；
从“./components/Houses/Houses.jsx”导入房屋；
常量应用=（）=>{
返回(
);
};
导出默认应用程序；

将您的路线包装在

BlogCategoriesMenu

组件中

编辑您的

BlogCategoriesMenu

，使其接受子组件

class BlogCategoriesMenu extends Component {
  render() {
    return(
         //...
         <div className="content-container">
            {this.props.children /*Add this line*/}
         </div>
         //...
    );
  }
} 

export default BlogCategoriesMenu;

---

如果希望在菜单下方呈现组件，则有以下几种可能性：

将菜单组件和组件放入页面组件中：

---

组件外部的所有内容都将使用路由组件进行渲染。因此，将

添加到

App

组件中，如下所示

const App = () => {

  return (
   <BrowserRouter>

   <BlogCategoriesMenu />

   <Switch>
   <Route path="/" component={Home} exact />
   <Route path="/blog" component={Blog} exact/>
   <Route path="/post/:id" component={Post} exact/>
   <Route path="/planets" component={Planets}></Route>
   <Route path="/signs" component={Signs}></Route>
   <Route path="/planetary-aspects" component={PlanetaryAspects}></Route>
   <Route path="/houses" component={Houses}></Route>
   <Route component={Error}/>
   </Switch>
   </BrowserRouter>
  );
};

const-App=（）=>{
返回(
);
};

确保将部件固定在

内

。否则它将无法渲染

---

这里是小的

您所说的

是什么意思？在新页面上显示每个组件

？是因为它没有显示组件上方的菜单吗？是的。单击菜单链接时，组件将显示在新页面中，但不会在菜单下呈现。

// the route
<Route path="/planets" component={PlanetsPage}></Route>

// the Page
export default PlanetsPage = () => (
  <>
    <BlogCategoriesMenu/>
    <Planets/>
  </>
)

// route
<Route path="/astronomy" component={Astronomy}/>

// wrapper component
export default Astronomy = () => (
  <>
    <BlogCategoriesMenu/>
    <Switch>
      <Route path="/planets" component={Planets}></Route>
      <Route path="/signs" component={Signs}></Route>
      <Route path="/planetary-aspects" component={PlanetaryAspects}></Route>
      <Route path="/houses" component={Houses}></Route>
      <Route component={Error}/>
    </Switch>
  </>
)

// new NavLinks
<NavLink to="/astronomy/planets" className="blog-categories-menu__items-a"  activeClassName="isActive">Planets</NavLink>
<NavLink to="/astronomy/signs" className="blog-categories-menu__items-a" activeClassName="isActive">Signs</NavLink>
<NavLink to="/astronomy/planetary-aspects"  className="blog-categories-menu__items-a" activeClassName="isActive">Planetary Aspects</NavLink>
<NavLink to="/astronomy/houses"  className="blog-categories-menu__items-a" activeClassName="isActive">Houses</NavLink>

const App = () => {

  return (
   <BrowserRouter>

   <BlogCategoriesMenu />

   <Switch>
   <Route path="/" component={Home} exact />
   <Route path="/blog" component={Blog} exact/>
   <Route path="/post/:id" component={Post} exact/>
   <Route path="/planets" component={Planets}></Route>
   <Route path="/signs" component={Signs}></Route>
   <Route path="/planetary-aspects" component={PlanetaryAspects}></Route>
   <Route path="/houses" component={Houses}></Route>
   <Route component={Error}/>
   </Switch>
   </BrowserRouter>
  );
};