react-router5 學習使用記錄

 

一，目錄結構

二，index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';


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

serviceWorker.unregister();

 

三，APP.js

import React from 'react';
import Detail from "./component/detail"
import Home from "./component/home"
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

import './App.css';

function App() {
  return (
    <div className="App">
    
      <Router>
      <br />
        <Link to="/home/gaoliang">首頁</Link><br />
        <Link to="/detail">詳情頁</Link><br /><br /><br /><br /><br /><br /><br />
        <Route path='/home/:name' component={Home} ></Route>
        <Route path='/detail' component={Detail} ></Route>
      </Router>
    </div>
  );
}

export default App;

 

四，home.js

import React from "react"
export default class Home extends React.Component{
    constructor(props) {
        super(props);

    }
    componentDidMount(){
        console.log(this.props.match.params);
    }
    render(){
        return (
            <div>
              這是首頁<br />
           
              <button onClick={() => this.props.history.push('/detail')}>通過函數跳轉去詳情頁AAA </button>
            </div>
        )
    }
} 

 

五，detail.js

 

import React from "react"
import { Link } from 'react-router-dom';
export default class Detail extends React.Component{
    componentDidMount() {
        console.log(this.props.match.params,'這是通過URL傳來的參數');
        //console.log(this.props.history.location.state);
    }
    render(){
        return (
            <div>
              這是詳情頁<br />
              <Link to="/home/zzz"> 通過link去首頁</Link>
            </div>
        )
    }
} 

 

有收穫就點個贊再走吧