react-router-dom 루트를 사용하여 페이지 이동 전참 실현

BrowserRouter 및 HashRouter 라우팅 모드

HashRouter 라우팅

import React from 'react';

export default class Home extends React.Component {
     

    constructor(props){
     
        super(props);
    }

    render() {
     
        return (
            <div>
                {
     /*   */}
                {
     /* 다른 페이지로 건너뛰기 */}

                <button onClick={
      ()=>{
     
                    this.props.history.push({
     
                        pathname : '/other',
                        state :{
     
                            id:3
                        }
                    });

                    // replace 
                    // this.props.history.replace('/other');
                    // this.props.history.replace({
     
                    //     pathname:'/other',
                    //     state : {
     
                    //         id:4
                    //     }
                    // });

                    // 
                    // this.props.history.goBack();
                    }
            }>  other  </button>
            </div>
        )
    }
}

import React from 'react';

export default class Other extends React.Component {
     

    constructor(props){
     
        super(props);
    }
    
    componentDidMount(){
     
        // 
        // console.log(this.props.match.params);

        // 
        console.log(this.props.history.location.state);
    }

    render() {
     
        return (
            <div>
                <a href='#/'> home </a>
            </div>
        )
    }
}

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

const BasicRoute = () => (
   <HashRouter>
       <Switch>
           <Route exact path="/" component={
     Home}/>
           <Route exact path="/other" component={
     Other}/>
           {
     /*   */}
           {
     /*  */}
       </Switch>
   </HashRouter>
);

export default BasicRoute;

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

ReactDOM.render(
	<Router />,
	document.getElementById('root')
);

	//push() replace()、goBack() 
   this.props.history.push({
         
       pathname : '/other',
       state :{
         
             id:3
      }
  });

BrowserRouter 라우팅

import React from 'react';
import {
     BrowserRouter, Route, Switch} from 'react-router-dom';
import Home from './home';
import Other from './other';

const BasicRoute = () => (
   <HashRouter>
       <BrowserRouter>     
       <Route  exact  path="/"   component={
     Home}/>
       <Route  path="/other"  name="other" component={
     Other}/>
       </BrowserRouter>
   </HashRouter>
);

export default BasicRoute;