时间戳

首页 > 解决方案 > 使用Router和Links在同一个地方渲染所有组件

javascript - 使用Router和Links在同一个地方渲染所有组件

问题描述

我有一个侧边栏和一个在 App 组件中呈现的 TopNav。

我的层次结构就像

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

我的意思是说 MyApp是在里面渲染的Index。里面App有 3 个组件，分别命名为Topnav、SideNav、Content。我希望Topnav ,Sidenav每次都可用，但这些导航中给出的链接应该在Content. 我怎么会这样？

下面是我的 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>
        );
    }
}

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

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

这是我想要做的确切演示。

我只想知道Routing配置。放置路由配置的内容和位置

标签： javascriptreactjsreact-router

解决方案

这个 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;

并创建文件夹组件并添加您的组件

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;

推荐阅读