React 路由

Router.js

import React from 'react'
import { BrowserRouter as Router, Route, Switch } from "react-router-dom"
import App from './Pages/app'
import Login from './Pages/login'
import Home from './Pages/home'
import Detail from './Pages/detail'
import noMatch from './Pages/404'

export default function IRouter() {
    return <Router>
        <Switch>
            <Route exact path="/" component={App}></Route>
            <Route path="/login" component={Login}></Route>
            <Route path="/home" component={Home}></Route>
            <Route path='/detail/:id/:ss' component={Detail}></Route>
            <Route path="*" component={noMatch}></Route>
        </Switch>
    </Router>
}

app.js

import React,{useState,useEffect} from 'react'
import {Link } from 'react-router-dom'
import  { Button } from 'antd'
import './app.scss'
import 'antd/dist/antd.css'

export default function App(){
    let [cnt,setCnt]= useState(0);
    useEffect(()=>{
        console.log('Executed useEffect');

    },[]);
    return <div className='container'>
      <h1>Welcome here!</h1>
        <Link to='/home'>Home</Link><br/>
        <Link to='/Login'>Login</Link><br/>
        <p>{cnt}</p><br/>
        <Button onClick={()=>{setCnt(cnt+1)}}>添加次数</Button>

    </div>

}


// class App extends React.Component {

//     handleJump = () => {    
//         this.props.history.push('/home');


//     }
//     render() {
//         return <div className='container'>
//             <h1>Welcome here!</h1>
//             <Link to='/home'>Home</Link><br />
//             <Link to='/Login'>Login</Link> <br/>
//             <Button onClick={this.handleJump}>Home</Button>
//         </div>

//     }
// }

//export default App;

Detail.js

import React from 'react'
import {useParams,useHistory} from 'react-router-dom'
import {Button} from 'antd'
import 'antd/dist/antd.css'

export default function Detail(){
    const params=useParams();
    const hisotry=useHistory();
    return <div>
       <p> This is Detail: {params.id} ; {params.ss} </p>
        {/* //{this.props.match.params.id} */}
        <Button onClick={()=>{hisotry.push('/') }}> Jump to Root </Button>
    </div>
}