react-router-dom

1. 설치

npm install react-router-dom --save-dev //      cnpm  npm  

2. 기본 작업
　　home.js

import React from 'react';


export default class Home extends React.Component {
    render() {
        return (
            

                디테일 가요.
            
        )
    }
}

　　detail.js

import React from 'react';


export default class Home extends React.Component {
    render() {
        return (
            

                홈으로 돌아가기
            
        )
    }
}

　　Router.js

import React from 'react';
import {HashRouter, Route, Switch} from 'react-router-dom';
import Home from '../home';
import Detail from '../detail';


const BasicRoute = () => (
    
        
            
            
        
    
);


export default BasicRoute;

　　index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Router from './router/router';

ReactDOM.render(
  ,
  document.getElementById('root')
);

3. a 태그로 점프
　　home.js

import React from 'react';


    export default class Home extends React.Component {
        render() {
            return (
                

                디테일 가요.
            
        )
    }
}

　　detail.js
 

import React from 'react';


export default class Home extends React.Component {
    render() {
        return (
            

                홈으로 돌아가기
            
        )
    }
}

 
4. 함수로 점프
　　1.일단 루터에서.js에 추가

import {HashRouter, Route, Switch, hashHistory} from 'react-router-dom';

　　2. 홈에서.js

import React from 'react';
export default class Home extends React.Component {
    constructor(props) {
        super(props);
    }
    
    
    render() {
        return (
            

                디테일 가요.
                 this.props.history.push('detail')}>      
            
        )
    }
}

a 탭 아래에 단추를 추가하고onClick 이벤트를 추가합니다.this를 통해.props.history.push 이 함수는detail 페이지로 이동합니다.루트 구성 요소에 추가된 코드는history라는 대상을 구성 요소의props에 등록한 다음 하위 구성 요소에서props를 통해history의push 방법을 호출하여 페이지를 돌릴 수 있습니다.
 
전재 대상:https://www.cnblogs.com/jiangningjn/p/11574327.html