Question

我开始学习React，并且我在应用程序中工作分为两个部分：用户登录时和未登录时。

未登录用户时，“ /”将显示登录页面。登录后，将显示“仪表板”页面。在“仪表板”页面中，左侧有一个顶部导航栏和一个侧边栏，在“中心”将显示该页面的内容。从iMaster链接此图片：

因此，侧边栏将具有链接，这些链接将更新显示为仪表板组件子级的组件。我搜索了“嵌套路线”，但没有成功。

我正在尝试执行此操作，因为我看到如果我将在“所有”页面中显示导航，则最好一次加载导航，然后更新导航的子项，而不是每次都加载导航页面。

有人可以帮忙吗？

App.js

import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Login from './pages/login';
import Dashboard from './pages/dashboard';

const App = () => (

    <div className="App">
      <BrowserRouter>
        <Switch>
            <Route exact path="/" component={Login} />
            <Route exact path="/dashboard" component={Dashboard} />
        </Switch>
    </BrowserRouter>
    </div>

);

export default App;

仪表板

import React, { Component } from 'react';
//BOOTSTRAP
import 'bootstrap/dist/css/bootstrap.min.css';
import { Col, Container, Row } from 'react-bootstrap';
//BOOTSTRAP

import './styles.css';
import TopSideNavBar from '../../components/TopSideNavBar';


export default class Dashboard extends Component {

    render() {

        return(

            <>

            <div className="body">

                <TopSideNavBar />

                <Container fluid className="content">
                 <Switch>
         <Route path={`${match.path}/component1`} render={Component1}/>
         <Route path={`${match.path}/component2`} render={Component2}/>
                 </switch>
                </Container>

            </div>


            </>

        );

    }
}

Answer 1

用BrowserRouter包装您的组件，并正确访问match.path

export default class Dashboard extends Component {
  render() {
    return (
      <BrowserRouter>
       <>

            <div className="body">

            <TopSideNavBar />
            <Switch>
            <Route path={`${this.props.match.path}/component1`} component={Component1} />
            <Route path={`${this.props.match.path}/component2`} component={Component2} />
           </Switch>
           </div>


       </>
      </BrowserRouter>
    );
  }
}

反应-由路由器更改组件

1 个答案: