react 경로 설정 방식 상세 설명

본 고 는 react 경로 설정 을 소개 하 였 으 며,최근 에 막 배우 기 시 작 했 으 며,여러분 에 게 공유 하 는 동시에 자신 에 게 필 기 를 남 겼 습 니 다.

LInk 점프 및 js 트리거 점프 및 전 삼 이 포함 되 어 있 습 니 다.
이것 은 프로젝트 의 디 렉 터 리 구조 입 니 다.주요 코드 는 src 디 렉 터 리 에 있 습 니 다.src 아래 에 containers 폴 더 를 새로 만 들 고 우리 의 일부 구성 요 소 를 넣 습 니 다.router 폴 더 는 경로 설정 에 사 용 됩 니 다.
순서대로 쓰기:detail 폴 더 의 코드

import React from 'react' 
 
class Detail extends React.Component { 
  render() { 
    return ( 
      <p>Detail，url  ：{this.props.params.id}</p> 
    ) 
  } 
} 
export default Detail  

home：

import React from 'react' 
import { Link } from 'react-router' 
 
class Home extends React.Component { 
  render() { 
    return ( 
      <div> 
        <p>Home</p> 
        <Link to="/list">to list</Link> 
      </div> 
    ) 
  } 
} 
 
export default Home 

list：

import React from 'react' 
import { hashHistory } from 'react-router' 
 
class List extends React.Component { 
  render() { 
    const arr = [1, 2, 3] 
    return ( 
      <ul> 
        {arr.map((item, index) => { 
          return <li key={index} onClick={this.clickHandler.bind(this, item)}>js jump to {item}</li> 
        })} 
      </ul> 
    ) 
  } 
  clickHandler(value) { 
    hashHistory.push('/detail/' + value) 
  } 
} 
 
export default List 

404yemian：

import React from 'react' 
 
class NotFound extends React.Component { 
  render() { 
    return ( 
      <p>404 NotFound</p> 
    ) 
  } 
} 
 
export default NotFound 

containers 아래 app.jsx 총 입구 파일 이 있 습 니 다.

import React from 'react' 
 
class App extends React.Component { 
  render() { 
    return ( 
      <div>{this.props.children}</div> 
    ) 
  } 
} 
 
export default App 

router 폴 더 아래:

import React from 'react' 
import { Router, Route, IndexRoute } from 'react-router' 
 
import App from '../containers/App' 
import Home from '../containers/Home' 
import List from '../containers/List' 
import Detail from '../containers/Detail' 
import NotFound from '../containers/NotFound' 
 
class RouteMap extends React.Component { 
  updateHandle() { 
    console.log('  router        ') 
  } 
  render() { 
    return ( 
       <Router history={this.props.history} onUpdate={this.updateHandle.bind(this)}> 
        <Route path='/' component={App}> 
          <IndexRoute component={Home}/> 
          <Route path='list' component={List}/> 
          <Route path='detail/:id' component={Detail}/> 
          <Route path="*" component={NotFound}/> 
        </Route> 
      </Router> 
    ) 
  } 
} 
 
export default RouteMap 

최종 바깥쪽 index.js:

import React from 'react' 
import { render } from 'react-dom' 
import { hashHistory } from 'react-router' 
 
import RouteMap from './src/router/routeMap' 
 
render( 
  <RouteMap history={hashHistory}/>, 
  document.getElementById('App') 
) 

사용 하 는 router 버 전 은^2.8.1 입 니 다.4.0 이상 의 버 전 을 다운로드 했다 면 쓰기 방법 은 현재 와 거의 다 릅 니 다.그 는 큰 변경 을 했 습 니 다.설정 할 때 router 버 전 번 호 를 주의 하 십시오.
프로젝트 주소
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.