深入了解React（二十一、路由6-带参数3）

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router, Route, Link, Switch} from 'react-router-dom';

import 'font-awesome/css/font-awesome.min.css';
import './index.css';
import './index.scss';

class A extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <h1>Component A</h1>
                <p>参数：{this.props.match.params.id}</p>
                <Switch>
                    <Route exact path={`${this.props.match.path}`} render={()=>{
                        return (
                            <div>
                                <p>这是未带参数的A组件</p>
                            </div>
                        )
                    }}/>
                    <Route exact path={`${this.props.match.path}/sub`} render={()=>{
                        return (
                            <div>
                                <p>这是Sub组件</p>
                            </div>
                        )
                    }}/>
                    <Route path={`${this.props.match.path}/:id`} render={(route) => {
                        return (
                            <div>
                                <p>这是带参数的A组件，参数为：{route.match.params.id}</p>
                            </div>
                        )
                    }}/>

                </Switch>
            </div>
        )
    }
}

class B extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>Component B</div>
        )
    }
}

class Wrapper extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <p><Link to="/a">组件A</Link></p>
                <p><Link to="/a/123">带参数的组件A</Link></p>
                <p><Link to="/a/sub">/a/sub</Link></p>
                <p><Link to="/b">组件B</Link></p>
                {this.props.children}
            </div>
        )
    }
}

ReactDOM.render(
    <Router>
        <Wrapper>
            <Route path="/a" component={A}></Route>
            <Route path="/b" component={B}></Route>
        </Wrapper>
    </Router>,
    document.getElementById('app')
);