import React, { Component } from "react";
import { BrowserRouter, Link, Switch, Route } from "react-router-dom";
import About from "./pages/About";
import Main from "./pages/Main"; //路由组件,放在pags文件夹
export default class App extends Component {
render() {
return (
<div className="flex-row-center">
<BrowserRouter>
{/* 第1步:整个应用都交由一个"路由器"去包裹管理(其实可以在index.js里直接把<App/>组件包起来),做监听 */}
<div style={{ marginRight: 20 }}>
{/* 第2步:路径切换 */}
<Link to="/about">About</Link>
<br />
<Link to="/main">Main</Link>
{/*
--------------------------------------Link与NavLink的区别?-------------------------------------------------
1. NavLink有一个高亮属性:activeClassName="";
<NavLink activeClassName="active" className=""></NavLink>
*/}
</div>
<div>
{/* 没有switch时,只要路径相同,所有匹配上的路由组件都会展示; switch能提高匹配效率(单一匹配)*/}
<Switch>
{/* 第3步:注册路由 */}
<Route path="/about" component={About} />
<Route path="/main" component={Main} />
{/*
-----------------------------------多级路径刷新页面,样式丢失问题?-----------------------------------
1. 以下两种情况都会被丢失样式的index.html兜底:(条件)
(1).<Route path="/a/main" component={Main} />多级路径刷新
(2).在输入框输入一堆没有的路径时
2. 原因?
index.html里引入的css样式,会在刷新重新请求服务器时去带上这个/a
3. 解决?
1). css引入使用绝对路径
2)。(基本不用)使用<HasnRouter>路由器进行全局包裹,因为/#/...后面的额东西,请求时不带入
*/}
{/*
---------------------------------路由的模糊匹配与精准匹配------------------------------------------
1. 模糊匹配 (包含且顺序一致)
举例:
<Link to="/about/a/b">About</Link>
<Route path="/about" component={About} />
2. 开启精准匹配 exact(不要随便开,否则会无法继续匹配二级路由)
<Route exact path="/about" component={About} />
*/}
</Switch>
{/*
------------------------------------路由组件与普通组件的区别?----------------------------------------
1. 组件写法不同
普通组件:<Demo/>
路由组件:<Route path="/about" component={About} />
2. 存放的位置不同
普通组件:components文件夹
路由组件:pages文件夹
3. 接收到的props不同
普通组件:写组件标签时传了啥,就接收啥
<div {...this.props}>其中this.props.children可以拿到“<Demo>标签体内容</Demo>”传进来的标签体内容
路由组件:接收到路由器router传给路由组件的3个参数
history :go/goBack/goForward/push/replace
location : pathname/search/state
match : params/path/url
*/}
</div>
</BrowserRouter>
</div>
);
}
}
/**
react-router-dom插件库 (dom表示web端)
1. 下载
npm i --save react-router-dom
import { Link, BrowserRouter } from "react-router-dom";
2. 内置组件?
<BrowserRouter>
<HashRouter>
<Route>
<Redirect>
<Link>
<NavLink>
<Switch>
3. API?
history对象/match对象/withRouter函数
*/