react-router-dom 配置化路由

• 父路由的代码。

import React from 'react'

import { Select } from 'antd'
import { BrowserRouter, Route, Router, Link, HashRouter, Switch, Redirect } from 'react-router-dom';
import homepage from './homepage'
import qingpage from './qing.js'
import Peizhi from './peizhi.js'



function Son() {

    return (
        <HashRouter>
            {/*  配置化路由： Peizhi 是一个js文件，该文件会有 { this.props.children } 接收子组件 */}
            <Peizhi>
                <Route path='/homepage' component={homepage} ></Route>
                <Route path='/qing' component={qingpage} ></Route>
            </Peizhi>
        </HashRouter>
    )
}
export default Son;           

复制

• 在peizhi.js中代码
• 注意一定要有 { this.props.children } 用来接收字路由

import React, { Component } from 'react'

import { Select } from 'antd'
import { BrowserRouter, Route, Router, Link, HashRouter, Switch, Redirect } from 'react-router-dom';
import homepage from './homepage'
import qingpage from './qing.js'



class Son extends Component {
    render() {

        return (
            // 混合化路由: 同一个js文件里面既有标签，又有路由

            <div>
                <ul>
                    <li> <Link to="/homepage" > 首页 </Link> <Link to="/qing" > 新闻列表 </Link> </li>
                </ul>
                {/* 下面就是接收   点击Link时候，对应的子组件  */}
                {this.props.children}

            </div>

        )
    }
}

   

export default Son;           

复制