react实例——2.底部导航及跳转

本节将在上节搭建好的项目下，实现底部导航和跳转，先看一下最后的效果：

首页

购物车

我的

主要的思路是：
1、首先需要一个默认路由，也就是你系统的首页。首页包含底部导航和导航对应的内容区域；
2、在首页中，使用嵌套路由，保持底部导航不变，主页面随着底部导航选择而变化。

具体的开发步骤如下：

1、安装react-router-dom

npm install react-router-dom --save-dev

运行完命令后，npm run start下，看项目是否可以运行起来，若报错，则删除node_modules文件，再npm install一下即可。
2、在src/pages/home目录下新建主页面main.js，然后在App.js中添加main.js的路由；
3、main.js主页面中编写底部导航栏及各个页面的跳转路由及逻辑，并新建对应的页面；
4、在src/assets文件夹下存放一些静态文件，如css，image等。
主要文件结构及实现代码如下：

文件结构

**APP.js**
import React, {Component} from 'react';
import {HashRouter, Route, Switch} from 'react-router-dom'
import MainComponent from './pages/home/main.js'

export default class App extends Component {
  render() {
    return (
      <React.Fragment>
        <HashRouter>
          <React.Fragment>
            <Switch>
              <Route path={'/'} component={MainComponent} ></Route>
            </Switch>
          </React.Fragment>
        </HashRouter>
      </React.Fragment>
    )
  }
}

**home/main.js**
import React, { Component } from 'react'
import  {Route,Switch,Redirect}  from  'react-router-dom';
import '../../assets/css/home/main.css'
import HomePage from './index'
import CartPage from '../cart/index'
import UserPage from '../user/index'

export default class MainPage extends Component {
  constructor() {
    super();
    this.state = {
      currentPath: ''
    }
  }
  componentDidMount() {
    this.setState({currentPath: this.props.history.location.pathname})
  }
  
  componentDidUpdate(newProps,oldProps) {
    if(newProps.history.location.pathname !== oldProps.currentPath) {
      this.setState({currentPath: this.props.history.location.pathname})
    }
  }

  goPage(url) {
    this.props.history.push(url)
    this.setState({currentPath: url})
  }

  render () {
    return (
      <div>
        <React.Fragment>
          <Switch>
            <Route path={"/home"} component={HomePage} ></Route>
            <Route path={"/cart"} component={CartPage}></Route>
            <Route path={"/user"} component={UserPage}></Route>
            <Redirect to={"/home"}></Redirect>
          </Switch>
        </React.Fragment>
        
        <div className="footer">
          <ul className={this.state.currentPath === "/home" ? "home-actived" : "home-default"} onClick={this.goPage.bind(this, '/home')}>
            <li></li>
            <li>首页</li>
          </ul>
          <ul className={this.state.currentPath === "/cart" ? "cart-actived" : "cart-default"} onClick={this.goPage.bind(this, '/cart')}>
            <li className="cart"></li>
            <li>购物车</li>
          </ul>
          <ul className={this.state.currentPath === "/user" ? "user-actived" : "user-default"} onClick={this.goPage.bind(this, '/user')}>
            <li className="user"></li>
            <li>我的</li>
          </ul>
        </div>
      </div>
    )
  }
}

**home/index.js**
import React, { Component } from 'react'

export default class HomePage extends Component {
  render () {
    return (
      <div>
        这是首页
      </div>
    )
  }
}
**cart/index.js和user/index.js都与home/index类似**

完成以上代码后，基本可以实现页面的跳转。
下面总结一下经常会用到的关于路由的东西：
1、HashRouter：使用 URL 中的 hash（#）部分去创建路由，简单说路由中带有#，例如http://localhost:3000/#/home
2、BrowserHistory：使用浏览器中的 History API 用于处理 URL，简单说路由中不带有#，例如http://localhost:3000/home
3、Route：设置路由与组件关联
4、Switch：只要匹配到一个地址不往下匹配，相当于for循环里面的break
5、Link：跳转页面，相当于vue里面的router-link
6、exact ：完全匹配路由，常用在子路由的<Route>组件中
7、Redirect：路由重定向
8、withRouter：将一个组件包裹进Route里面，使history, location, match就会被放进这个组件的props属性中

另外路由认证，路由懒加载，以及路由间传值都是一个项目中常用到的东西。

还有react中必学的有redux状态管理，以及数据请求，例如fetch请求，axios请求等。下面一节直接展示一下我的react学习成果，做出的一个购物网站。

上一节：react实例——1.项目搭建

最后编辑于：2020.05.11 23:53:18