Реагировать - Изменить компонент маршрутизатором - PullRequest
Новая
       16

Реагировать - Изменить компонент маршрутизатором

1 голос
/ 21 января 2020

Я начинаю изучать React, и я работаю в приложении в двух частях: когда пользователь вошел в систему и не зарегистрирован.

Когда пользователь не вошел в систему, в «/» будет отображаться имя входа стр. Когда вошел в систему, покажет страницу панели инструментов. На странице Dashboard есть верхняя панель навигации и боковая панель слева, а в «центре» будет отображаться содержимое страницы. Линке на этом изображении из iMaster :

enter image description here

ТАК на боковой панели будут ссылки, которые обновят компонент, который отображается как потомки компонента Dashboard. Я искал "Nested Routes", но безуспешно.

Я пытаюсь сделать это, потому что я вижу, что если я покажу навигацию на "всех" страницах, лучше загрузить навигацию один раз и затем обновите дочерние элементы для навигации, вместо загрузки навигаций на каждой странице.

Кто-нибудь может помочь?

Приложение. 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>


            </>

        );

    }
}

1 Ответ

1 голос
/ 22 января 2020

Оберните ваш компонент с 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>
    );
  }
}
...