codesandbox https://codesandbox.io/s/9l6prnyxjy

app.js

import React, { Component, Fragment } from "react";
import {
AppBar,
Button,
Tabs,
Tab,
Icon,
Typography,
Fade,
Slide
} from "@material-ui/core";
import _ from "lodash";
import {
BrowserRouter,
HashRouter,
Link,
Redirect,
Route,
Switch,
withRouter
} from "react-router-dom"; const l = console.log; let Home = props => {
return (
<Fragment>
<Typography variant="headline">首页</Typography>
</Fragment>
);
};
let About = props => {
return (
<Fragment>
<Typography variant="headline">关于</Typography>
</Fragment>
);
}; let Mine = props => {
return (
<Fragment>
<Typography variant="headline">我的</Typography>
</Fragment>
);
}; @withRouter
class Tabbars extends Component {
state = {
tabs: [
{
label: "home",
to: "/home",
icon: "home"
},
{
label: "about",
icon: "supervised_user_circle",
to: "/about"
},
{
label: "mine",
icon: "perm_identity",
to: "/mine"
}
],
value: 0
};
handleChange = (event, value) => {
this.setState({ value });
};
toNav = to => e => {
this.props.history.push(to);
}; componentWillMount() {
// l(this.props)
let { location, history } = this.props; // 确保用户在浏览器改变路由,激活按钮发生变化
this.changeTabbarValue(location.pathname); // 监听路由的变化,主要用于重定向时确保激活按钮发生变化
history.listen(({ pathname }, action) => {
l("router change");
// action === "REPLACE" &&
this.changeTabbarValue(pathname);
});
} changeTabbarValue(pathname) {
let i = this.state.tabs.findIndex(({ to }) => to.includes(pathname));
if (i < 0) {
return l("没找到根路由");
}
i !== this.state.value &&
this.setState({
value: i
});
} componentDidMount() {
document.title = "Ajanuw";
} render() {
return (
<AppBar position="static" color="default">
<Tabs
value={this.state.value}
onChange={this.handleChange}
indicatorColor="primary"
textColor="primary"
fullWidth
>
{this.state.tabs.map(($_, index) => {
return (
<Tab
label={$_.label}
key={index}
onClick={this.toNav($_.to)}
icon={<Icon>{$_.icon}</Icon>}
/>
);
})}
</Tabs>
</AppBar>
);
}
} // Tabbars = withRouter(Tabbars) class App extends Component {
render() {
return (
<BrowserRouter>
<Fragment>
<Tabbars />
{/* 路由中有重定向, 加入动画效果可能会报错 */}
<Switch>
{/* <Route
exact
strict
path="/"
render={props => true && (<Redirect to='/home'/>)}
/> */}
{/* <Redirect exact from='/' to='/home'/> */}
<Redirect from="/" to="/home" exact strict />
<Route
exact
strict
path="/home"
render={props => <Home {...props} />}
/>
<Route path="/about" component={About} />
<Route path="/mine" component={Mine} />
<Route
render={() => {
return <div>404</div>;
}}
/>
</Switch>
</Fragment>
</BrowserRouter>
);
}
} export default App;

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import CssBaseline from "@material-ui/core/CssBaseline";
import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
import { pink, blue } from "@material-ui/core/colors"; // 自定义主题
const theme = createMuiTheme({
palette: {
primary: blue,
secondary: pink
}
}); ReactDOM.render(
<React.Fragment>
<CssBaseline />
<MuiThemeProvider theme={theme}>
<App />
</MuiThemeProvider>
</React.Fragment>,
document.getElementById("root")
);

react 路由导航栏 withRouter的更多相关文章

  1. React Navigation 导航栏样式调整+底部角标消息提示

    五一佳节匆匆而过,有人选择在外面看人山人海,有人选择宅在家中度过五一,也有人依然坚守在第一线,致敬! 这是坚持学习react-native的第二篇文章,可能会迟到,但是绝不会缺席,这篇要涉及到的是re ...

  2. 【React -- 9/100】 抽离顶部导航栏 - [组件复用]

    今天写的页面中需要重复使用到顶部导航栏,所以把顶部导航栏抽离出来 考虑复用组件的健壮性,使用PropTypes校验,可以自定义一个click事件 JSX import React from " ...

  3. 在React中使用 react-router-dom 编程式路由导航的正确姿势【含V5.x、V6.x】

    ## react-router-dom 编程式路由导航 (v5) ###### 1.push跳转+携带params参数 ```jsx props.history.push(`/b/child1/${i ...

  4. element-ui使用导航栏跳转路由用法

    element-ui使用导航栏跳转路由用法 最近初学vue,试着做一个小项目熟悉语法与思想,其中使用elemen-ui的导航栏做路由跳转切换页面.下面记录一下学习过程 element-ui引入vue项 ...

  5. React Native(四)——顶部以及底部导航栏实现方式

    效果图: 一步一步慢慢来: 其实刚入手做app的时候,就应该做出简单的顶部以及底部导航栏.无奈又在忙其他事情,导致这些现在才整理出来. 1.顶部导航栏:react-native-scrollable- ...

  6. elementUI的导航栏怎么根据路由默认选中相关项

    1. <el-menu :default-active="this.$route.path.substr(1)" class="left-nav"> ...

  7. vue+el-menu实现路由刷新和导航栏菜单状态保持(局部刷新页面)

    一.菜单项激活状态保持 有时,我们在项目中会有这样一个需求,即实现 一个侧导航栏,点击不同的菜单项,右边内容会跟着变化,而页面手动刷新后想要使菜单激活状态保持,那么这个功能该如何实现呢? 现在给出以下 ...

  8. [RN] React Native 自定义导航栏随滚动渐变

    React Native 自定义导航栏随滚动渐变 实现效果预览: 代码实现: 1.定义导航栏 NavPage.js import React, {Component} from 'react'; im ...

  9. React实现顶部固定滑动式导航栏(导航条下拉一定像素时显示原导航栏样式)

    摘要 基于react的框架开发一个顶部固定滑动式的酷炫导航栏,当导航栏置顶时,导航栏沉浸在背景图片里:当鼠标滑动滚轮时,导航栏固定滑动并展示下拉样式. JS部分 相关技术栈:react.antd.re ...

随机推荐

  1. Kubernetes基础:Service

    本文的试验环境为CentOS 7.3,Kubernetes集群为1.11.2,安装步骤参见kubeadm安装kubernetes V1.11.1 集群 Service 介绍 我们通过Pod.Deplo ...

  2. FileUpload1.PostedFile.FileName 获取的文件名

    例如文件叫做 c:\web\a.jpg 如果用IE,则返回   c:\web\a.jpg 含路径 如果用Chrome,则返回 a.jpg 不含路径.

  3. redis查看状态信息

    redis查看状态信息 info all|default Info 指定项 server服务器信息 redis_version : Redis 服务器版本 redis_git_sha1 : Git S ...

  4. pip安装pycrypto报错:Microsoft Visual C++ 14.0 is required. 和 SSLError: HTTPSConnectionPool的解决办法

    今天本打算把[Python3爬虫]网易云音乐爬虫 的代码敲一遍, 但是在安装pycrypto老是报错, 由于我计算是win10, 并且也有vs2017 python3环境下安装pycrypto的一些问 ...

  5. VUE温习:style层次分析

    一.vue样式style层次分析 1.样式可以在main.js.模块js文件.组件style.组件script标签内,index.html文件内引入,不同位置引入的样式有什么关系. 2.总结: (1) ...

  6. bootstrap-3-验证表单

    js: $('#nqs-add-userxinxi-form').bootstrapValidator({ message: 'This value is not valid', excluded : ...

  7. 使用python实现深度神经网络 1(转)

    使用python实现深度神经网络 1(转) https://blog.csdn.net/oxuzhenyi/article/details/73026790

  8. Win10系统的SurfacePro4如何重装系统-1 SurfacePro专用的PE

    下载SurfacePro专用的PE(普通的PE可能不支持触摸屏操作,甚至没法启动Surface,所以务必要重新制作PE),下面提供百度云下载地址,下载之后,双击EXE,会进行检测 链接:https:/ ...

  9. 使用Azure的GPU系列虚拟机Ubuntu-16.0.4安装GPU驱动并使用Tensorflow-GPU的过程。

    1.source activate python362.source activate tensorflow-gpu3.pip install tensorflow-gpu(提示安装的这个版本:ten ...

  10. 我的博客即将搬运同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=i5j7gwrxj9x5

    我的博客即将搬运同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=i5j7gwrxj9x5