4-1动态路由

1、配置动态路由

App.js

<Switch>
     <Route exact path="/" component={Home}></Route>
     <Route path="/about" component={About}></Route>
     <Route path="/detail/:id" component={Detail}></Route>  
</Switch>

2、跳转

Home.js

class Home extends Component {
    constructor(props){
        super(props);
        this.state={
            id:1001
        }
    }
    render() {
        return (
            <div>
                主页
                <Button onClick={this.handleToggle}>detail</Button>
            </div>
        );
    }
    handleToggle=()=>{
        this.props.history.push(`/detail/${this.state.id}`)
    }
}

3、详情页接收

this.props.match.params

class Detail extends Component {
    render() {
        return (
            <div>
                详情页
            </div>
        );
    }
    componentDidMount() {
       console.log(this.props.match.params)
    }
}