React路由器如何在同一页面上单击显示每个组件答案

【问题标题】：React router how to display each component on click on the same pageReact路由器如何在同一页面上单击显示每个组件
【发布时间】：2019-12-14 10:10:51
【问题描述】：

我有一个用 React 创建的简单菜单，它有四个链接。当我单击每个链接时，应在菜单下方呈现不同的组件。目前我的路由器在新页面上显示每个组件，如何在点击时在同一页面上使用 React 路由器显示它们？我尝试使用Switch 并移动BrowserRouter，但它不起作用。这是菜单组件：

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;

这是我在 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;

【问题讨论】：

displays each component on a new page 是什么意思？是不是它没有在您的组件上方显示菜单？
是的。当您单击该组件在新页面中显示的菜单链接时，它不会在菜单下呈现。

标签： javascript reactjs react-router

【解决方案1】：

将您的路线包装在 BlogCategoriesMenu 组件中。

编辑您的 BlogCategoriesMenu 以使其接受子组件

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

export default BlogCategoriesMenu;

然后在App.js

const App = () => {

  return (
   <BlogCategoriesMenu>
     <BrowserRouter>
       {/*...*/}
     </BrowserRouter>
   </BlogCategoriesMenu>
  );
};

export default App;

【讨论】：

【解决方案2】：

如果您希望您的组件在菜单下方呈现，有多种可能性：

将您的菜单组件和您的组件放在一个页面组件中：

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

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

在菜单下降低Routes：

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

【讨论】：

【解决方案3】：

<Switch> 组件之外的所有内容都将使用路由组件进行渲染。所以将<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>
  );
};

确保将持有<NavLink> 的组件放在<BrowserRouter> 中。否则不会渲染。

这里是小demo

【讨论】：