React-라우터에 의해 구성 요소 변경

토니 스타 쿠스

저는 React에 대해 배우기 시작하고 사용자가 로그인 할 때와 로그인하지 않았을 때 두 부분으로 애플리케이션에서 작업하고 있습니다.

사용자가 로그인되지 않은 경우 "/"는 로그인 페이지를 표시합니다. 로그인되면 대시 보드 페이지가 표시됩니다. 대시 보드 페이지의 왼쪽에는 상단 탐색 메뉴와 사이드 바가 있으며 "중앙"에는 페이지의 내용이 표시됩니다. iMaster 에서이 이미지에 링크 :

여기에 이미지 설명 입력

따라서 사이드 바에는 대시 보드 구성 요소의 자식으로 표시되는 구성 요소를 업데이트하는 링크가 있습니다. "Nested Routes"를 검색했지만 성공하지 못했습니다.

"모든"페이지에 nav를 표시하면 모든 페이지에서 nav를로드하는 대신 nav를 한 번로드 한 다음 nav에서 자식을 업데이트하는 것이 더 낫다는 것을 알기 때문에이 작업을 수행하려고합니다.

누구든지 도울 수 있습니까?

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>


            </>

        );

    }
}
알렉스

구성 요소를 감싸고 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>
    );
  }
}

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

onClick을 사용하여 React에서 비 라우터 구성 요소의 경로를 변경하십시오.

분류에서Dev

다른 구성 요소의 상태에 따라 React 구성 요소 가시성 변경

분류에서Dev

형제 라우터보기 구성 요소 내에서 App.vue에 삽입 된 NavBar의 배경색 변경

분류에서Dev

React Native : 활성 여부에 따라 구성 요소 속성의 부울 값 변경

분류에서Dev

React의 자식 구성 요소에서 부모 상태 변경 (Redux 없음)

분류에서Dev

구성 요소의 구독에 의해 선택되지 않은 상태 변경

분류에서Dev

해결 매개 변수를 UI 라우터의 angular1 구성 요소에 전달

분류에서Dev

반응 라우터를 사용하여 유사한 경로에 대해 다른 구성 요소로 라우팅

분류에서Dev

React-가져온 구성 요소의 값 변경

분류에서Dev

vue.js의 하위 구성 요소에서 상위 구성 요소 변경

분류에서Dev

마우스 오버시 구성 요소의 배경색 변경

분류에서Dev

React Native : 다른 구성 요소에서 상태 변경

분류에서Dev

react-native의 변수 안에 jsx 구성 요소 저장

분류에서Dev

구성 요소 구조 : 반응 라우터 경로를 기반으로 하나의 구성 요소 교체

분류에서Dev

React 구성 요소의 구조 분해

분류에서Dev

React-router : 경로를 통해 구성 요소에 데이터 전달

분류에서Dev

역할에 따라 동일한 React 경로의 다른 구성 요소

분류에서Dev

라디오 버튼의 라벨 테두리 색상 변경. 스타일 구성 요소 및 React JS

분류에서Dev

React Native에서 한 함수 구성 요소의 상태를 다른 함수 구성 요소에서 변경하는 방법은 무엇입니까?

분류에서Dev

React JS에서 특정 키로 자식 구성 요소를 클릭하면 부모 구성 요소의 상태 변경

분류에서Dev

VUE 구성 요소의 라 라벨 환경 변수

분류에서Dev

React 기능적 구성 요소를 사용하여 부모 구성 요소의 내부 기능 변경

분류에서Dev

React-부모 클래스 구성 요소 함수 자식 구성 요소의 클래스 변경

분류에서Dev

dangerouslySetInnerHTML에 의해 설정된 HTML에 React 구성 요소 추가

분류에서Dev

다른 구성 요소에 의해 열리는 React Native close Modal

분류에서Dev

eventHandler에서 React의 특정 구성 요소를 어떻게 변경할 수 있습니까?

분류에서Dev

ReactJS-중첩 경로에 따라 부모의 구성 요소 변경

분류에서Dev

Kendo React PDF 및 클래스 구성 요소에서 함수 구성 요소로 변경

분류에서Dev

React Native에서 Class 구성 요소를 기능 구성 요소로 변경하는 방법

Related 관련 기사

  1. 1

    onClick을 사용하여 React에서 비 라우터 구성 요소의 경로를 변경하십시오.

  2. 2

    다른 구성 요소의 상태에 따라 React 구성 요소 가시성 변경

  3. 3

    형제 라우터보기 구성 요소 내에서 App.vue에 삽입 된 NavBar의 배경색 변경

  4. 4

    React Native : 활성 여부에 따라 구성 요소 속성의 부울 값 변경

  5. 5

    React의 자식 구성 요소에서 부모 상태 변경 (Redux 없음)

  6. 6

    구성 요소의 구독에 의해 선택되지 않은 상태 변경

  7. 7

    해결 매개 변수를 UI 라우터의 angular1 구성 요소에 전달

  8. 8

    반응 라우터를 사용하여 유사한 경로에 대해 다른 구성 요소로 라우팅

  9. 9

    React-가져온 구성 요소의 값 변경

  10. 10

    vue.js의 하위 구성 요소에서 상위 구성 요소 변경

  11. 11

    마우스 오버시 구성 요소의 배경색 변경

  12. 12

    React Native : 다른 구성 요소에서 상태 변경

  13. 13

    react-native의 변수 안에 jsx 구성 요소 저장

  14. 14

    구성 요소 구조 : 반응 라우터 경로를 기반으로 하나의 구성 요소 교체

  15. 15

    React 구성 요소의 구조 분해

  16. 16

    React-router : 경로를 통해 구성 요소에 데이터 전달

  17. 17

    역할에 따라 동일한 React 경로의 다른 구성 요소

  18. 18

    라디오 버튼의 라벨 테두리 색상 변경. 스타일 구성 요소 및 React JS

  19. 19

    React Native에서 한 함수 구성 요소의 상태를 다른 함수 구성 요소에서 변경하는 방법은 무엇입니까?

  20. 20

    React JS에서 특정 키로 자식 구성 요소를 클릭하면 부모 구성 요소의 상태 변경

  21. 21

    VUE 구성 요소의 라 라벨 환경 변수

  22. 22

    React 기능적 구성 요소를 사용하여 부모 구성 요소의 내부 기능 변경

  23. 23

    React-부모 클래스 구성 요소 함수 자식 구성 요소의 클래스 변경

  24. 24

    dangerouslySetInnerHTML에 의해 설정된 HTML에 React 구성 요소 추가

  25. 25

    다른 구성 요소에 의해 열리는 React Native close Modal

  26. 26

    eventHandler에서 React의 특정 구성 요소를 어떻게 변경할 수 있습니까?

  27. 27

    ReactJS-중첩 경로에 따라 부모의 구성 요소 변경

  28. 28

    Kendo React PDF 및 클래스 구성 요소에서 함수 구성 요소로 변경

  29. 29

    React Native에서 Class 구성 요소를 기능 구성 요소로 변경하는 방법

뜨겁다태그

보관