前端猛男的博客基础知识 - 路由
重定向
Switch ：路由开关组件。 React会自动帮我们检测重定向地址， 最好包裹着路由， 配套使用 。会自动检测
Redirect组件Route组件Redirect ：重定向组件。
from属性设置匹配内容 去匹配url的内容,to属性匹配成功重定向要去往的页面，exact属性精准查询属性 。
设置之后，会精准去匹配
from属性里面设置的内容，如果没exact属性，则模糊匹配from属性里面设置的内容
- Route : 路由组件。 如果
没设置path属性或者path属性为空或设置*，当去往的url地址无效时，会自动重定向到component属性里面的组件页面
Redirect重定向 与 Route重定向
<!-- 路由组件 IndexRouter.jsx -->
import React from "react";
// 路由模块
import { HashRouter, Route, Switch, Redirect } from "react-router-dom";
// 页面
import Home from "./tabber/Home";
import News from "./tabber/news";
import Wode from "./tabber/wode";
import NotFounted from "./tabber/NotFounted";
export default function IndexRouter() {
return (
<div>
{/* Hash模式 */}
<HashRouter>
{/* 被Switch组件包裹之后，React会自动帮我们检测重定向地址 */}
<Switch>
{/* 路由表 */}
<Route path="/Home" component={Home}></Route>
<Route path="/News" component={News}></Route>
<Route path="/Wode/Wode" component={Wode}></Route>
{/* 当没有匹配的路由时 path=""|"*" 或不设置 会去往这个页面 */}
<Route path="*" component={NotFounted}></Route>
{/* 模糊匹配 from模糊匹配内容 to去往的地址 */}
{/* 当url有模糊匹配的内容时 他会去往to设置的页面 */}
{/* <Redirect from={"/"} to={"/Home"}></Redirect> */}
{/* 精准匹配 exact属性 只有完全匹配才会去往 */}
<Redirect from="/" to="/Home" exact></Redirect>
</Switch>
</HashRouter>
</div>
);
}
<!-- App.jsx -->
import React from "react";
import ReactDom from 'react-dom';
// 导入自己封装的路由组件
import IndexRouter from "./view/一级路由与多级路由/IndexRouter";
export default function App() {
return (
<div>
<IndexRouter></IndexRouter>
</div>
);
}
ReactDom.render(<App/>,document.getElementById('root'))