index.tsx
import React from 'react';
import {
BrowserRouter,
HashRouter,
Route,
Link,
NavLink,
Switch,
Redirect,
} from 'react-router-dom';
import Header from './Comps/Header';
import MyNavLink from './Comps/MyNavLink';
import './index.css';
import About from './About';
import Home from './Home';
import News from './News';
const RouterDome: React.FC = () => {
/*
* react-router-dom 的使用，当前版本 5.3.0
*
* BrowserRouter 历史模式路由， HashRouter hash模式路由
* 使用时 Route 时必须要用 BrowserRouter 或 HashRouter 包裹，而且只能有一个，可以直接包裹在App上。
*
* NavLink 和 Link 的区别
* NavLink 可以设置 activeClassName 属性，当该属性与当前路径匹配时，会自动将属性内的类名添加到元素上
* <NavLink activeClassName="active" className="route-li" to="/about">
*
* Switch 的 作用
* 可以提高路由匹配的效率
* 当多个 Route 存在相同的 path 时，那么这几个组件将会同时显示
* 如下：（Home 组件 和 About 组件 将同时显示）
* <Route path="/home" component={Home}></Route>
* <Route path="/home" component={About}></Route>
* 若 使用 Switch 将 Route 包裹，那么当路由匹配当第一个组件时，将不再往下配置，则只会显示 Home 组件
*
* router 的 模糊匹配（默认模式）和 严格匹配
*
* 模糊匹配（匹配顺序是从左往右进行的）
* 例子1 （匹配成功）
* <NavLink to="/home/a/b/c">News</NavLink>
* <Route path="/home" component={Home}></Route>
*
* 例子2 （匹配失败）
* <NavLink to="/a/home/c">News</NavLink>
* <Route path="/home" component={Home}></Route>
*
* 严格模式
* 开启严格匹配模式，在 Route 组件内 添加 exact 即可, 且 to 和 path 必须相同才能匹配成功
* 如：
* <NavLink to="/about">News</NavLink>
* <Route exact path="/about" component={About}></Route>
* 需注意一般情况下，不要开启严格匹配模式，可能会导致二级路由匹配失败
*
* Redirect 路由重定向
* 用法 <Redirect to="/home"></Redirect>，在 to 中指定需要展示的组件
* 当所有点路由都匹配不上时，该组件才会生效
*
* 嵌套路由
* 子级路由必须以父级路由名称为开头，而且父级路由不能开启 exact 模式
* 如：
* 父级
* <Route path="/news" component={News}></Route>
* 子级
* <Route path="/news/compA" component={CompA}></Route>
* <Route path="/news/compB" component={CompB}></Route>
*
* router params 参数
* 传参：<NavLink to="/news/compA/a">compA</NavLink>
* 接收：<Route path="/news/compA/:type" component={CompA}></Route>
* 获取参数：通过 props.match.params 即可拿到 type = a
*
* router search 参数
* 传参：<NavLink to="/news/compB?name=compB&type=B">compB</NavLink>；参数通过 ? 拼接在路径上，多个参数用 & 隔开，且无需去接收
* 获取参数：通过 props.location.search 获取，需注意这里获取到的参数是字符串 ?name=compB&type=B
* 示例：
* import React from 'react';
* import qs from 'querystring'; // 无需安装，此为自带的库
*
* interface ICompB {
* [propName: string]: any;
* }
* const CompB: React.FC<ICompB> = (props) => {
* const { search } = props.location;
* const query = qs.parse(search.slice(1));
* console.log(query); // { name: 'compB', type: 'B' }
* return <h3>this is CompB</h3>;
* };
* export default CompB;
*
* router state 参数
* 注意：HashRouter 模式下，刷新会导致 state 数据丢失，因此 HashRouter 模式下不推荐使用该方法传参
* 示例：
* 传参：<NavLink to={{ pathname: '/news/compC', state: { name: 'compC', type: 'C' } }}>compC</NavLink>
* 获取参数：
* import React from 'react';
* const CompC: React.FC = (props) => {
* console.log((props as any).location.state); // {name: 'compC', type: 'C'}
* return <h3>this is CompC</h3>;
* };
* export default CompC;
*
* router push 和 replace
* push（默认模式），会在浏览器上留下记录
* replace 则是替换当前路径，且不会在浏览器留下记录
* 开启replace模式：
* 如：<NavLink replace to="/news/compA/a">compA</NavLink>，<Link replace></Link>
*
* 编程式路由的使用
* 先熟悉下 props.history 几个常用的属性
* history: {
* go: ƒ go(n),
* goBack: ƒ goBack(),
* goForward: ƒ goForward(),
* push: ƒ push(path, state),
* replace: ƒ replace(path, state)
* }
* go 的使用
* n 为正数则往后退，负数则往前退
* 示例：(props as any).history.go(n);
*
* goBack 的使用
* 往前退一步
* 示例：(props as any).history.goBack();
*
* goForward 的使用
* 往后退一步
* 示例：(props as any).history.goForward();
*
* push 的使用
* 第一种情况，params 参数
* 示例：(props as any).history.push('/news/compA/a');
* 第二种情况，search 参数
* 示例：(props as any).history.push('/news/compB?name=compB&type=B');
* 第三种情况，state 参数
* 示例：(props as any).history.push('/news/compC', { name: 'compC', type: 'C' });
*
* replace 和 push 使用基本相同，只不过是 把 push 替换成了 replace，参考上面案例。
* 需注意以上的路由方法只能在路由组件中使用
*
* withRouter
* 作用：使一般组件也能像路由组件一样，调用 history 身上的方法
*/
return (
<BrowserRouter>
<div className="router-demo">
{/* 一般组件 */}
<Header></Header>
<div className="router-main">
<div className="left">
<ul>
{/* <Link to="./home" className="route-li">Home</Link> */}
<li>
<NavLink activeClassName="active active2" className="route-li" to="/home">
Home
</NavLink>
</li>
<li>
<NavLink activeClassName="active" className="route-li" to="/about">
About
</NavLink>
</li>
<li>
<MyNavLink to="/news">News</MyNavLink>
</li>
</ul>
</div>
<div className="right">
<Switch>
{/* <Route path="/home" component={Home}></Route> */}
<Route path="/home" component={Home}></Route>
<Route path="/about" component={About}></Route>
<Route path="/news" component={News}></Route>
<Redirect to="/home"></Redirect>
</Switch>
</div>
</div>
</div>
</BrowserRouter>
);
};
export default RouterDome;
News 组件
import React from 'react';
import { NavLink, Switch, Route, Redirect } from 'react-router-dom';
import CompA from './CompA';
import CompB from './CompB';
import CompC from './CompC';
import './index.css';
const News: React.FC = (props) => {
function onGo(n: number) {
// n 为正数则往后退，负数则往前退
(props as any).history.go(n);
}
function goBack() {
// 往前退一步
(props as any).history.goBack();
}
function goForward() {
// 往后退一步
(props as any).history.goForward();
}
function onPushParams() {
(props as any).history.push('/news/compA/a');
}
function onPushSearch() {
(props as any).history.push('/news/compB?name=compB&type=B');
}
function onPushState() {
(props as any).history.push('/news/compC', { name: 'compC', type: 'C' });
}
return (
<div className="news-content">
<h2>this is News</h2>
<button onClick={() => onGo(-1)}>go -1</button>
<button onClick={() => onGo(1)}>go 1</button>
<button onClick={() => goBack()}>goBack 往前退一步</button>
<button onClick={() => goForward()}>goForward 往后退一步</button>
<button onClick={() => onPushParams()}>push params 传参</button>
<button onClick={() => onPushSearch()}>push search 传参</button>
<button onClick={() => onPushState()}>push state 传参</button>
<ul>
<li>
<NavLink to="/news/compA/a">compA</NavLink>
</li>
<li>
<NavLink to="/news/compB?name=compB&type=B">compB</NavLink>
</li>
<li>
<NavLink to={{ pathname: '/news/compC', state: { name: 'compC', type: 'C' } }}>
compC
</NavLink>
</li>
</ul>
<Switch>
<Route path="/news/compA/:type" component={CompA}></Route>
<Route path="/news/compB" component={CompB}></Route>
<Route path="/news/compC" component={CompC}></Route>
<Redirect to="/news/compA/a"></Redirect>
</Switch>
</div>
);
};
export default News;
Header 组件
import React from 'react';
import { withRouter } from 'react-router-dom';
const Header: React.FC = (props) => {
function onGo(n: number) {
// n 为正数则往后退，负数则往前退
(props as any).history.go(n);
}
return (
<>
<h2>React Router Dome</h2>
<button onClick={() => onGo(-1)}>go -1</button>
<button onClick={() => onGo(1)}>go 1</button>
</>
);
};
export default withRouter(Header);