ant design 后台模板 -2. 学习 react-router URL 参数

src 下创建文件夹 param,然后在 param 下创建 Users.js

  
import React from 'react';

class User extends React.Component{

    render(){
        return (
            <div>{this.props.match.params.id}</div>
        );
    }
}

export default User;

在 param 下创建 User.js

import React from 'react';
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom';
import User from './User';

class Users extends React.Component{

    render(){

        return(
            <Router>
                <div>
                    <h2>Accounts</h2>
                    <ul>
                        <li><Link to="/netflix">Netflix</Link></li>
                        <li><Link to="/zillow-group">Zillow Group</Link></li>
                        <li><Link to="/yahoo">Yahoo</Link></li>
                        <li><Link to="/modus-create">Modus Create</Link></li>
                    </ul>

                    <Route path="/:id" component={User}/>
                </div>
            </Router>

        );
    }
}

export default Users;

修改 App.js

import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom';
import BasicExample from './basic/BasicExample';
import Users from './param/Users';

class App extends Component {

    render() {
        return (
            <Router>
            <div>
              <ul>
                <li><Link to="/baiscExample">基本使用</Link></li>
                <li><Link to="/users">参数传递</Link></li>
              </ul>

              <hr/>

              <Route path="/baiscExample" component={BasicExample}/>
              <Route path="/users" component={Users}/>
            </div>
          </Router>
        );
    }
}

export default App;

效果如下