app.js

import React from 'react';

import  Home from './components/Home.js'
import World from './components/World.js';
import Phone from "./components/Phone.js";
import{Route,Link,NavLink,Switch,Redirect,withRouter} from 'react-router-dom'
import './App.css';
function App(props) {

    /*不是路由切换的组件也有属性*/
 //监控组件路由的变化
    props.history.listen((link)=>{
        console.log(link)
    })
    console.log(props)
  return (
    <div className="App">
        <div>
            <NavLink to="/home">点我去home</NavLink>
            <NavLink to="/world">点我去world</NavLink>
            <NavLink to="/phone/我是参数">点我去hone</NavLink>

            <button onClick={()=>{props.history.push("/home")}}>点我去home</button>
            <button onClick={()=>{props.history.push("/world")}}>点我去world</button>
            <button onClick={()=>{props.history.push("/phone")}}>点我去phone</button>
        </div>
        <Switch>
      你好
        <Redirect from="/" to="/home/homea" exact></Redirect>
        <Route path="/home" component={Home}></Route>
            <Route path="/home" component={Home}></Route>
        <Route path="/world" component={World}></Route>
        <Route path="/phone/:id" component={Phone}></Route>
        </Switch>
    </div>
  );
}

export default withRouter(App);

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {BrowserRouter} from "react-router-dom"
ReactDOM.render(<BrowserRouter><App/></BrowserRouter>,

  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Home.js

import React, {Component} from 'react';
import{Route,NavLink} from 'react-router-dom'
import Homea from './home/homea.js'
import Homeb from './home/homeb.js'
class Home extends Component {
    render() {
        return (
            <div>
                <NavLink to="/home/homea">homea</NavLink>
                <NavLink to="/home/homeb">homeb</NavLink>
                <Route path="./home/homea" component={Homea}/>
                <Route path="./home/homeb" component={Homeb}/>
            </div>
        );
    }
}

export default Home;

Phone.js

import React, {Component} from 'react';

class Phone extends Component {
    render() {
        return (
            <div>
                phone
            </div>
        );
    }
}

export default Phone;

World.js

import React, {Component} from 'react';

class World extends Component {
    render() {
        return (
            <div>
                world
            </div>
        );
    }
}

export default World;

homea.js

import React, {Component} from 'react';

class Homea extends Component {
    render() {
        return (
            <div>
                homea


            </div>
        );
    }
}

export default Homea;

 homeb.js

import React, {Component} from 'react';

class Homeb extends Component {
    render() {
        return (
            <div>
                homeb
            </div>
        );
    }
}

export default Homeb;

运行结果