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"/>,
]

转载于:https://www.cnblogs.com/xiaozhumaopao/p/10999322.html

webpack 配置react脚手架（四）：路由配置相关推荐

react 引用本地js_从零配置webpack 4+react脚手架（二）
前言: 你可能也注意到了,html文件中的关于js的引用是我们手动写的,那假如我们改了输出路径或打包编译之后的文件名,那我们岂不是还要手动去修改html文件中的引用?我们怎么做到,像create-re ...
react 文件 md5_从零配置webpack 4+react脚手架（二）
前言: 你可能也注意到了,html文件中的关于js的引用是我们手动写的,那假如我们改了输出路径或打包编译之后的文件名,那我们岂不是还要手动去修改html文件中的引用?我们怎么做到,像create-re ...
实验07 路由器的基本配置和单臂路由配置实验报告
这个格式可能有点问题,文档下载地址:https://download.csdn.net/download/mariodf/20211672?spm=1001.2014.3001.5503 一.实验名称 ...
react ant design路由配置
最初的时候,只使用了antd中的menu,header和footer都是自己写的组件,在写路由时,总是报如下错误: 相关的路由配置如下: 在网上查的说是组件未暴露出去或者是return 这一行必须有个 ...
路由配置与管理——ISIS路由配置与管理
IS-IS基本功能配置与管理只有配置了IS-IS基本功能,才可组建IS-IS网络.IS-IS基本功能包括以下几项配置任务:创建IS-IS进程是配置网络实体名称.配置全局Level级别以及建立IS-I ...
路由配置与管理——静态路由配置与管理
静态路由是一种最简单的路由,需手工配置,用一条指令指定静态路由的目的IP地址.子网掩码.下一跳IP地址,或者出接口.优先级等主要参数值就可以了.还可根据实际需要配置静态路由与BFD或者NQA的联动. ...
路由配置与管理——OSPF路由配置与管理1
OSPF路由配置与管理 Ospf(开放式最短路径优先)是一个基于链路状态进行路由计算的动态路由协议,主要用于大中型网络.AR G3系列路由器支持OSPFv2和OSPFv3两种版本,OSPFv2仅支持I ...
路由器的基本配置和单臂路由配置
实验名称路由器的基本设置和单臂路由配置任务一路由器的基本配置一.实验目标 1.掌握路由器几种常用配置方法: 2.掌握采用Console线缆配置路由器的方法: 3.掌握采用Telnet方式配置路 ...
laravel php配置,PHP Laravel框架路由配置及设置技巧全解
Laravel框架在PHP开发中使用十分广泛,本文主要对Laravel框架中的路由设置作详细的介绍,Laravel的路由配置非常灵活,如何设置好路由对PHP应用来说也是相当关键的. 基本路由您的应用 ...

webpack 配置react脚手架（四）：路由配置

webpack 配置react脚手架（四）：路由配置相关推荐

最新文章

热门文章