react的动态路由

1. 动态路由传参 建议用这个，刷新不会丢

  history.push(`/detail/${id}`)

2 query传参

   history.push({ pathName: '/detail', query: { myid: id } })   

3. state传参

   history.push({pathname:'/detail',state:{myid: id}})    

import React, {useEffect, useState } from 'react'
import axios from 'axios'
import { NavLink,useHistory } from "react-router-dom"
export default function NowPlaying(props) {
    const [list, setlist] = useState([])
    useEffect(() => {
        axios({
            url: "https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=2&k=5064519",
            hearder: {
                'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.0","e":"16473286284773838969634817","bc":"110100"}',
                'X-Host': 'mall.film-ticket.film.list'
            }
        }).then((res) => {
            console.log(res.data.data.films)
            setlist(res.data.data.films)
        })  
    }, [])
    const history = useHistory()
    const handleChangePage = (id) => {
    //     windows.location.href = "#/detail/" + id
    //     props.history.push(`/detail/${id}`)
    //    this.props.history.push(`/detail/${id}`)
    // 1 -动态路由传参  建议用这个，刷新不会丢
      history.push(`/detail/${id}`)
    // 2 query传参    
        // history.push({ pathName: '/detail', query: { myid: id } })   
    // 3 state传参
        // history.push({pathname:'/detail',state:{myid: id}})    
        
    }
    return (
        <div>
            {
                list.map(item => {
                    /**编程式导航 */
                    <li key="item.filmId" onClick={() => handleChangePage(item.filmId)}>
                    {/* 声明式导航 */}
                    {/* <NavLink to={'/detail' + item.filmsId}>{item.name}</NavLink> */}
                    </li>
                })
            }
      </div>
    )
}

import React, { Component } from 'react'
import { HashRouter, Route, Redirect,Switch } from 'react-router-dom'

import Films from './../views/Films'
import Cinemas from './../views/Cinemas'
import Center from './../views/Center'
import Detail from './../views/Detail'

import NotFound from './../views/NotFound'


export default class indexRouter extends Component {
  render() {
    return (
        <HashRouter>
            {/* 插槽 */}
            {this.props.children}
            <Switch>
                <Route path="/films" component={Films} />
                <Route path="/cinemas"  component={Cinemas} />
                <Route path="/center" component={Center} />

                {/* 动态路由 */}
                {/* <Route path="/detail/:myid"  component={Detail} /> */}
                {/* query传参 */}
                <Route path="/detail" component={Detail} />
                {/* <Redirect from="/"  to="/films" />*/}
                <Redirect from="/"  to="/films" exact />
                {/* 精确匹配  exact*/}   
                <Route  component={NotFound} />
            </Switch>
            {/* 模糊匹配 */}
       </HashRouter>
    )
  }
}