webpack 配置react脚手架(四):路由配置
1. 由于 react-router 是集成了 react-router-dom 和 react-router-native的一起的,所以这里要使用的是 react-router-dom,
2. 安装 npm i react-router -S 、 npm i react-router-dom -S
路由配置router.js:
import React from 'react'
import {
Route
} from 'react-router-dom' import TopicList from '../views/topic-list/index'
import TopicDetail from '../views/topic-detail/index' export default () => [
//react 16 可以直接返回一个数组 不需要在外层加div
/* 这里路由为 ‘/’ 的要加上 exact。因为/路由最大,覆盖了/detail 等路由,不加设置的话,
所有的页面都会同时加载 / 的路由内容,所以加上 exact,规定只能严格等于该路由。
*/
<Route path="/" component={TopicList} exact/>,
<Route path="/detail" component={TopicDetail} key="detail" />,
]
对于最外层的入口文件 app.js
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom' //浏览器路由
import { AppContainer } from 'react-hot-loader' // eslint-disable-line
import App from './views/App'//组件 const root = document.getElementById('root')
const render = (Component) => {
ReactDOM.hydrate(
<AppContainer>
<BrowserRouter>
<Component />
</BrowserRouter>
</AppContainer>,
root,
)
} render(createApp(App)) if (module.hot) {
module.hot.accept('./views/App', () => {
const NextApp = require('./views/App').default // eslint-disable-line
render(createApp(NextApp))
})
}
使用 Redirect组件,可以在用户访问某个路由时,跳转到其他路由:
import React from 'react'
import {
Route,
Redirect,
} from 'react-router-dom' import TopicList from '../views/topic-list/index'
import TopicDetail from '../views/topic-detail/index' export default () => [
<Route path="/" render={()=>{ <Redirect to ="/list"/>}} key="index" exact/>,
<Route path="/list" component={TopicList} key="list"/>,
<Route path="/detail" component={TopicDetail} key="detail"/>,
]
webpack 配置react脚手架(四):路由配置的更多相关文章
- webpack 配置react脚手架(二):热更新
下面继续配置 webpack dev server hot module replacement: 首先配置dev-server 安装 npm i webpack-dev-ser ...
- webpack 配置react脚手架(六):api
1 访问网址 https://cnodejs.org/api 可以调取api 2.//该body-parser 可以将请求的body数据,转变成 json 格式数据://express-session ...
- react中的路由配置踩坑记
react 路由配置中,如果根路由(/)匹配一个组件,另一个路由(/list)在进行匹配的时候也会匹配到根路由(/),即在 /list 页面展示的时候 / 页面总是展示在上方. 此时如果想进行严格匹配 ...
- react ant design路由配置
最初的时候,只使用了antd中的menu,header和footer都是自己写的组件,在写路由时,总是报如下错误: 相关的路由配置如下: 在网上查的说是组件未暴露出去或者是return 这一行必须有个 ...
- react 脚手架 及路由和 redux
前提是我们需要下载 nodejs 使用 npm 下载 react 的脚手架,react-router-dom,redux 全局下载 react 的脚手架:npm i create-react-app ...
- webpack 配置react脚手架(三):eslint 及优化
首先谨记 eslint的官网: http://eslint.cn/ 1 安装eslint npm i eslint -D 2.在根目录下新建文件 .eslintrc { "extends ...
- webpack 配置react脚手架
1 react 基本js文件: import React from 'react'; import ReactDOM from 'react-dom'; import App from './App. ...
- webpack 配置react脚手架(五):mobx
1. 配置项.使用mobx,因为语法时es6-next,所以先配置 .babelrc 文件 { "presets": [ ["es2015", { " ...
- react脚手架搭建及配置
npm install -g create-react-app 装完之后,生成一个新的项目,可以使用下面的命令: create-react-app my-app cd my-app/yarn star ...
随机推荐
- 【GStreamer开发】GStreamer基础教程07——多线程和Pad的有效性
目标 GStreamer会自动处理多线程这部分,但在有些情况下,你需要手动对线程做解耦.本教程会教你怎样才能做到这一点,另外也展示了Pad的有效性.主要内容包括: 如何针对部分的pipeline建立一 ...
- Swoole练习 TCP
TCP <?php $serv = new swoole_server("127.0.0.1", 9501); //监听连接进入事件 $serv->on('connec ...
- JAVA 读取xml格式的数据
<?xml version="1.0" encoding="UTF-8"?> <column-enums> <type name= ...
- Python数据挖掘之随机森林
主要是使用随机森林将four列缺失的数据补齐. # fit到RandomForestRegressor之中,n_estimators代表随机森林中的决策树数量 #n_jobs这个参数告诉引擎有多少处理 ...
- 基于DNN的推荐算法总结
1.早期的算法 深度学习在CTR预估应用的常见算法有Wide&Deep,DeepFM等. 这些方法一般的思路是:通过Embedding层,将高维离散特征转换为固定长度的连续特征,然后通过多个全 ...
- zblog常用到的几个标签介绍
文章归档 <divclass="function"id="divArchives"> <h3><#ZC_MSG028#>&l ...
- Linux基础-02-目录文件管理
1. Linux文件系统的层次结构 1) Linux文件系统的树状结构: 在Linux或UNIX操作系统中,所有的文件和目录都被组织成一个以根节点开始的倒置的树状结构. 2) 目录的定义: 目录相当于 ...
- 【LEETCODE】36、121题,Best Time to Buy and Sell Stock
package y2019.Algorithm.array; /** * @ProjectName: cutter-point * @Package: y2019.Algorithm.array * ...
- java influx DB工具类
配置 application-properties: spring.influxdb.url=${influxdb_host:127.0.0.1} spring.influxdb.port=${inf ...
- springboot + shiro 构建权限模块
权限模块基本流程 权限模块的基本流程:用户申请账号和权限 -->登陆认证 -->安全管控模块认证 -->调用具体权限模块(基于角色的权限控制) --> 登陆成功 -->访 ...