React全家桶+共享单车实战开发——Router 4.0 路由实战演练

参考：  https://blog.csdn.net/qq_34829447/article/details/81916545

补充：Router 抽离为单独的组件时：

• /src/pages/router-demo/router2/router.js

import React from 'react'
import {HashRouter as Router, Route, Link} from 'react-router-dom'
import Main from './../router1/Main'
import About from './../router1/About'
import Topic from './../router1/Topic'
import Home from './Home'
export default class IRouter extends React.Component{
     
    render(){ 
        return(
            <Router>
                <Home>
                     <Route exact={true} path="/" component={Main}></Route>
                     <Route  path="/about" component={About}></Route>
                     <Route  path="/topics" component={Topic}></Route>
                </Home>
                   
            </Router>
        );
    }
}

• /src/pages/router-demo/router2/Home.js

import React from 'react'
import { Link} from 'react-router-dom'

export default class Home extends React.Component{
    render(){
        return (
           
                <div>
                    <ul>
                        <li>
                            <Link to = "/">Home1</Link>
                        </li>
                        <li>
                            <Link to ="/about">about1</Link>
                        </li>
                        <li>
                            <Link to="/topics">topic1</Link>
                        </li>
                       
                    </ul>
                    <hr/>
                    {this.props.children}
                </div>
        );
    }
}

• /src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
//import Life from './pages/demo/Life';
import Admin from './admin'
import IRouter from './pages/router_demo/router2/router'
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<IRouter />, 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();

 

嵌套路由：外层不能加精准匹配

• /src/pages/router-demo/router2/router.js

import React from 'react'
import {HashRouter as Router, Route, Link} from 'react-router-dom'
import Main from './../router1/Main'
import About from './../router1/About'
import Topic from './../router1/Topic'
import Home from './Home'
export default class IRouter extends React.Component{
     
    render(){ 
        return(
            <Router>
                <Home>
                     <Route path="/main" render={()=>{
                         return (
                         <Main>
                            <Route path="/main/a" component={About}></Route>
                        </Main>)
                     }}>
                        
                     </Route>
                     <Route  path="/about" component={About}></Route>
                     <Route  path="/topics" component={Topic}></Route>
                </Home>
                   
            </Router>
        );
    }
}

• /src/pages/router-demo/router2/Home.js

import React from 'react'
import { Link} from 'react-router-dom'

export default class Home extends React.Component{
    render(){
        return (
           
                <div>
                    <ul>
                        <li>
                            <Link to = "/main">Home1</Link>
                        </li>
                        <li>
                            <Link to ="/about">about1</Link>
                        </li>
                        <li>
                            <Link to="/topics">topic1</Link>
                        </li>
                       
                    </ul>
                    <hr/>
                    {this.props.children}
                </div>
        );
    }
}

• /src/pages/router-demo/router2/Main.js

import React from 'react'
import {Link} from 'react-router-dom'
export default class Main extends React.Component{
    render(){
        return (
                <div>
                    this is Main page,
                    <Link to ="/main/a">嵌套路由</Link>
                    <hr/>
                    {this.props.children}
                </div>
        );
    }
}