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脚手架(四):路由配置的更多相关文章

  1. webpack 配置react脚手架(二):热更新

    下面继续配置 webpack dev server    hot module replacement: 首先配置dev-server     安装     npm i webpack-dev-ser ...

  2. webpack 配置react脚手架(六):api

    1 访问网址 https://cnodejs.org/api 可以调取api 2.//该body-parser 可以将请求的body数据,转变成 json 格式数据://express-session ...

  3. react中的路由配置踩坑记

    react 路由配置中,如果根路由(/)匹配一个组件,另一个路由(/list)在进行匹配的时候也会匹配到根路由(/),即在 /list 页面展示的时候 / 页面总是展示在上方. 此时如果想进行严格匹配 ...

  4. react ant design路由配置

    最初的时候,只使用了antd中的menu,header和footer都是自己写的组件,在写路由时,总是报如下错误: 相关的路由配置如下: 在网上查的说是组件未暴露出去或者是return 这一行必须有个 ...

  5. react 脚手架 及路由和 redux

    前提是我们需要下载 nodejs 使用 npm 下载 react 的脚手架,react-router-dom,redux 全局下载 react 的脚手架:npm i create-react-app ...

  6. webpack 配置react脚手架(三):eslint 及优化

    首先谨记 eslint的官网:  http://eslint.cn/ 1 安装eslint  npm i eslint -D 2.在根目录下新建文件 .eslintrc { "extends ...

  7. webpack 配置react脚手架

    1 react 基本js文件: import React from 'react'; import ReactDOM from 'react-dom'; import App from './App. ...

  8. webpack 配置react脚手架(五):mobx

    1.  配置项.使用mobx,因为语法时es6-next,所以先配置 .babelrc 文件 { "presets": [ ["es2015", { " ...

  9. react脚手架搭建及配置

    npm install -g create-react-app 装完之后,生成一个新的项目,可以使用下面的命令: create-react-app my-app cd my-app/yarn star ...

随机推荐

  1. 【GStreamer开发】GStreamer基础教程07——多线程和Pad的有效性

    目标 GStreamer会自动处理多线程这部分,但在有些情况下,你需要手动对线程做解耦.本教程会教你怎样才能做到这一点,另外也展示了Pad的有效性.主要内容包括: 如何针对部分的pipeline建立一 ...

  2. Swoole练习 TCP

    TCP <?php $serv = new swoole_server("127.0.0.1", 9501); //监听连接进入事件 $serv->on('connec ...

  3. JAVA 读取xml格式的数据

    <?xml version="1.0" encoding="UTF-8"?> <column-enums> <type name= ...

  4. Python数据挖掘之随机森林

    主要是使用随机森林将four列缺失的数据补齐. # fit到RandomForestRegressor之中,n_estimators代表随机森林中的决策树数量 #n_jobs这个参数告诉引擎有多少处理 ...

  5. 基于DNN的推荐算法总结

    1.早期的算法 深度学习在CTR预估应用的常见算法有Wide&Deep,DeepFM等. 这些方法一般的思路是:通过Embedding层,将高维离散特征转换为固定长度的连续特征,然后通过多个全 ...

  6. zblog常用到的几个标签介绍

    文章归档 <divclass="function"id="divArchives"> <h3><#ZC_MSG028#>&l ...

  7. Linux基础-02-目录文件管理

    1. Linux文件系统的层次结构 1) Linux文件系统的树状结构: 在Linux或UNIX操作系统中,所有的文件和目录都被组织成一个以根节点开始的倒置的树状结构. 2) 目录的定义: 目录相当于 ...

  8. 【LEETCODE】36、121题,Best Time to Buy and Sell Stock

    package y2019.Algorithm.array; /** * @ProjectName: cutter-point * @Package: y2019.Algorithm.array * ...

  9. java influx DB工具类

    配置 application-properties: spring.influxdb.url=${influxdb_host:127.0.0.1} spring.influxdb.port=${inf ...

  10. springboot + shiro 构建权限模块

    权限模块基本流程 权限模块的基本流程:用户申请账号和权限 -->登陆认证 -->安全管控模块认证 -->调用具体权限模块(基于角色的权限控制) --> 登陆成功 -->访 ...