Javascript 使用路由器和链接在同一位置渲染所有组件

我有一个侧边栏和一个TopNav，我在应用程序组件中呈现

我的等级制度就像

Index>App>SideBar[>Lnks]=TopNav[>Links]=Content

我的意思是说我的

应用程序

是在

索引

中呈现的。在

App

内部，有三个组件，分别名为Topnav、SideNav和Content。 我希望

Topnav，Sidenav

每次都可用，但是这些导航中给出的链接应该在

内容中呈现。我怎么会这样

下面是我的App.js

class App extends React.Component {
    render() {
        return (
            <div>
                <SideNav /> //SideNav should be rendered always
                <TopNav />  //This one too 
                <div className={'content'}>
                    Render All the data from the links in Sidenav and Topnav here.
                </div>
            </div>
        );
    }
}


类应用程序扩展了React.Component{
render（）{
返回(
//应始终呈现SideNav
//这个也是
在这里呈现Sidenav和Topnav中链接的所有数据。
);
}
}

我的index.js看起来像下面的代码

ReactDOM.render(
    <App/>, document.getElementById('root'));

ReactDOM.render(
我想做什么

我只想知道
路由
配置。路由配置是什么，放在哪里
这个app.js可以工作

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import SideNav from './Components/SideNav';
import TopNav from './Components/TopNav';
import Home from './Components/Home';
import Stuff from './Components/Stuff';
import Noroute from './Components/Noroute';

function App() {
  return (
    <div className="App">
      <SideNav/>
      <TopNav/>
      <Switch>
          <Route exact path='/' component={Home} />
          <Route path='/stuff' component={Stuff} />
          <Route  component={Noroute} />
      </Switch>
    </div>
  );
}

export default App;

从“React”导入React；
从“react router dom”导入{Switch，Route}；
从“./Components/SideNav”导入SideNav；
从“./Components/TopNav”导入TopNav；
从“./Components/Home”导入Home；
从“./Components/Stuff”导入内容；
从“./Components/Noroute”导入Noroute；
函数App（）{
返回(
);
}
导出默认应用程序；

和创建文件夹组件并添加组件

SideNav.js

import React from "react";
import { Link } from 'react-router-dom';
class SideNav extends React.Component {
    render(){
        return (
            <div>
                <ul className="navbar-nav mr-auto">
                    <li><Link to={'/'} className="nav-link"> Home </Link></li>
                    <li><Link to={'/stuff'} className="nav-link">Stuffs</Link></li>
                </ul>
            </div>
        )
    }
}

export default SideNav;

从“React”导入React；
从'react router dom'导入{Link}；
类SideNav扩展了React.Component{
render（）{
返回(

家
东西

)
}
}
导出默认侧导航；
如果我想将道具传递给孩子们怎么办？我该怎么做？假设你想将一些数据从App.js传递到SideNav，然后在SideNav中，你可以使用“this.props.value”进入渲染函数。不，不在应用程序中。而是使用路由器链接呈现的组件。``component={Stuff}``。如果我想传递值怎么办。我必须传递
应用程序
或
侧导航
中的道具吗？给定
侧导航
包含指向
东西的链接
值不能在路由器部分传递。当我们直接调用侧导航或顶导航组件时，将数据从父级传递给子级将得到工作