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>

    )

  }

}