React 小案例 路由跳轉

在上篇的基礎上做路由跳轉：上篇

安裝路由及程式碼：

安裝：cnpm i -S react-router-dom

1.在pages裡建立四個跳轉頁面

2.在src資料夾下建立router.js，router.js全部內容：

首先引入路由元件，

建立四個要跳轉的<Route>標籤，path是組建路徑，component是元件名稱

import React from 'react'
import {BrowserRouter,Route,Switch} from 'react-router-dom'
import Home from './pages/home'
import Category from './pages/category'
import Car from './pages/car'
import User from './pages/user'

export default ()=>(
    <BrowserRouter>
        <Switch>
            <Route path='/home' component={Home}></Route>
            <Route path='/category' component={Category}></Route>
            <Route path='/car' component={Car}></Route>
            <Route path='/user' component={User}></Route>
        </Switch>
    </BrowserRouter>
)複製程式碼

3.App.js全部內容：

首先引入routerMap，將RouterMap標籤渲染在頁面上

import React, { Component } from 'react';
import './App.css';
import './static/iconfont.css'
import RouterMap from './router'
class App extends Component {
  render() {
    return (
      <div className="App">
        <RouterMap/>
      </div>
    );
  }
}

export default App;
複製程式碼

4.將之前的Tabbar導航引入每個頁面元件，目的讓每個頁面下面顯示導航

import React,{Component} from 'react'
import Tabbar from '../components/tabbar'

class Home extends Component{
    render(){
        return(
            <div>
                <Tabbar/>
            </div>
        )
    }
}

export default Home複製程式碼

5.修改之前tabbar元件的內容，

首先引入Link，然後使用Link代替要跳轉的div標籤，

刪去之前div的點選事件，因為Link標籤渲染出來有a標籤的效果，

修改陣列，增加一條每個分頁面url的資料，利用不同的url形成不同的點選，辨別去哪是高亮顯示，

給Link加一個to={v.link}，跳轉至其他頁面，

用const url = window.location.href; 獲取當前頁面的url

用加給路由 url.indexOf(v.link)>-1 監測當前url是否包含v.link中的地址  判定如果包含就給當前Link標籤新增active類

import React,{Component} from 'react'
import {Link} from 'react-router-dom'
import './index.css'
const tarbarArr =[
    {
        img:'icon-home',
        text:'首頁',
        link:'/home'
    },
    {
        img:'icon-fenlei',
        text:'分類',
        link:'/category'
    },
    {
        img:'icon-gouwuchekong',
        text:'購物車',
        link:'/car'
    },
    {
        img:'icon-yonghu',
        text:'我的',
        link:'/user'
    }
]
class Tabbar extends Component{
    constructor(props){
        super(props)
        this.state={
            index:0
        }
    }
    render(){
        const url = window.location.href;
        return(
            <div className="tabbar">
                <div className="tabbar-content">
                    {
                        tarbarArr.map((v,i)=>(
                            <Link to={v.link} key={i} className={"tabbar-item"+(url.indexOf(v.link)>-1?' active':'')}>
                                <div className={"iconfont "+v.img}/>
                                <div>{v.text}</div>
                            </Link>
                        ))
                    }
                </div>
            </div>
        );
    }
}

export default Tabbar;複製程式碼

最後效果