반응 라우팅의 간단한 사용법(코드 예)

이 글은 리액트 라우팅(코드 예시)의 간단한 사용법을 담고 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

내가 원하는 것은 단순하고 투박한 라우팅입니다

저는 vue-router 라우팅 사용법에 익숙하지만, 다시 React-router를 사용하는 것은 항상 꽤 귀찮은 일입니다.

그런 다음 직접 캡슐화하세요

1. 다중 레벨 라우팅을 캡슐화하는 경우 ————파일 이름은 routerView.js

import React from 'react';
import {Switch, Redirect, Route} from 'dva/router';
export default (props)=>{
  return <switch>{
    props.routes.map((item, index)=>{
      console.log(item.path);
      return <route>{
        if (item.children){
          return <item.component></item.component>
        }else{
          return <item.component></item.component>
        }
      }}></route>
    })
  }<redirect></redirect>
  }</switch>
}

2입니다. 경로 목록 개체를 정의합니다. ————파일 이름은 index.js

import React from 'react';

// 一级路由
import Tab from '../routes/TabPage';
import Detail from '../routes/Detail';

// 二级路由
import Rank from '../routes/RankPage';
import Search from '../routes/SearchPage'
import Index from '../routes/IndexPage';

export default {
  routes: [{
    path: '/tab',
    component: Tab,
    children: [{
      path: '/tab/index',
      component: Index
    },
    {
      path: '/tab/rank',
      component: Rank
    },
    {
      path: '/tab/search',
      component: Search
    }]
  },
  {
    path: "/detail",
    component: Detail
  }]
}

입니다.

3. 전역적으로 마운트

4. 페이지에서 사용

궁금한 점이 있으면 메시지를 남겨서 소통하세요

1. column

2. 코알라 프론트 엔드 팀 읽기

3. 기사 세부 정보

的버그는 내 잘못이 아닙니다

                                                                                                           ~                                               ~ ~                                                                                                 ~ ~                           ~

                                                                                                                                                           36번 읽으세요                                                        읽는 데 6분이 걸립니다.                                                 ~ ~                          -                                                                                                                                                                                                                                                                                                                                           粗 내가 원하는 것은 Vue-Router 경로 사용에 사용되는 단순하고 무례한 라우팅

인데, React-Router를 사용하면 매우 번거롭다는 느낌이 듭니다.

그런 다음 직접 캡슐화하세요

1. 다중 레벨 라우팅을 캡슐화하는 경우 ————파일 이름은 routerView.js

import React from 'react';
import {Switch, Redirect, Route} from 'dva/router';
export default (props)=>{
  return <switch>{
    props.routes.map((item, index)=>{
      console.log(item.path);
      return <route>{
        if (item.children){
          return <item.component></item.component>
        }else{
          return <item.component></item.component>
        }
      }}></route>
    })
  }<redirect></redirect>
  }</switch>
}

2입니다. 경로 목록 개체를 정의합니다. ————파일 이름은 index.js

import React from 'react';

// 一级路由
import Tab from '../routes/TabPage';
import Detail from '../routes/Detail';

// 二级路由
import Rank from '../routes/RankPage';
import Search from '../routes/SearchPage'
import Index from '../routes/IndexPage';

export default {
  routes: [{
    path: '/tab',
    component: Tab,
    children: [{
      path: '/tab/index',
      component: Index
    },
    {
      path: '/tab/rank',
      component: Rank
    },
    {
      path: '/tab/search',
      component: Search
    }]
  },
  {
    path: "/detail",
    component: Detail
  }]
}

입니다.

3. 전역적으로 마운트

4. 페이지에서 사용

궁금한 점이 있으면 메시지를 남겨서 소통하세요

Report

마음껏 좋아해주세요

아마도 관심있습니다

댓글

~

기본 정렬 ~ 발진

위 내용은 반응 라우팅의 간단한 사용법(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!