React 二级路由的配置

//根组件代码--->

 

//1.先下载 react路由 

//yarn add react-router-dom@5.2.0    //最好下载这个版本，不然可能有bug

 

import React, { Component } from 'react'

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

//2. 引入react-router 和需要的组件

import { HashRouter,Router,Route,Switch} from 'react-router-dom';

import Home from './view/Home';

import LIst from './view/LIst';

import Shop from './view/Shop';

 

export default class App extends Component {

    state={

        name:'张三',

        age:'18',

    }

  render() {

    return (

        <div>

            <HashRouter>

                <Link to="/">首页</Link>

                <Link to="/list">列表</Link>

                <Link to="/shop">商品</Link>

                    {/* Switch 优化，已经有了就不会去再运行了 */}

                    <Switch> 

                        {/* exact 精准匹配 */}

                        <Route exact path="/" component={Home}></Route>

　　　　　　　　{/* path对应地址 用component 显示对应的组件 */}

                        <Route exact path="/" component={Home}></Route>

                        <Route path="/list" component={LIst}></Route>

                        <Route path="/shop" component={Shop}></Route>

                    </Switch>

            </HashRouter>

        </div>

    )

  }

}

 

 

//二级路由同理

商品组件代码 --->

 

import React, { Component } from 'react'

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

import { HashRouter,Router,Route,Switch,Redirect} from 'react-router-dom';

import SA from './ShopS/SA'

import SB from './ShopS/SB'

import SC from './ShopS/SC'

export default class Shop extends Component {

  render() {

    return (

      <div>

        <h3>商品</h3>

        <HashRouter>

          <Link to="/shop/sa">SA页面</Link>

          <Link to="/shop/sb">SB页面</Link>

          <Link to="/shop/sc">SC页面</Link>

          <Switch>

            <Route path="/shop/sa" component={SA}></Route>

            <Route path="/shop/sb" component={SB}></Route>

            <Route path="/shop/sc" component={SC}></Route>

            {/* 重定向如果到了/shop 这个页面那么就重定向到 /shop/sa */}

            <Redirect from="/shop" to="/shop/sa"></Redirect>

          </Switch>

        </HashRouter>

      </div>

    )

  }

}