前端猛男的博客基础知识 - 路由
路由拦截
Route组件里面有一个属性render他接收一个回掉函数，内部可以处理一些逻辑，需要返回一个组件值。 我们可以通过这种方法来完成路由拦截
但是render拦截 会将组件提前创建，会导致组件内部 props属性里面会缺少一些路由方面的数据,render属性的回调函数有个参数，这个参数就是路由放的一些数据，需要利用父传子将 数据传递过去，就可以啦。
<Route path="/Wode/Wode" render={(props) => <Wode {...props} /> </Route>
<!-- IndexRouter.jsx -->
import React from "react";
import { HashRouter, Route, Switch, Redirect } from "react-router-dom";
import Home from "./tabber/Home";
import Wode from "./tabber/wode";
import NotFounted from "./tabber/NotFounted";
export default function IndexRouter(props) {
<!-- 判断条件 -->
const isToken = () => {
return localStorage.getItem("token");
};
return (
<div>
<HashRouter>
<Switch>
<Route path="/Home" component={Home}></Route>
{/* 路由拦截 */}
{/* render属性 接收一个回调函数必需返回一个组件 可以在里面处理逻辑 从而达到拦截效果 */}
<!-- 但是 组件提前创建啦 我们需要将props 传递给Wode组件 要不然Wode组件props属性上没一些路由方法 -->
<Route
path="/Wode/Wode"
render={(props) =>
isToken() ? <Wode {...props} /> : <Redirect from="/" to="/"></Redirect>
}
></Route>
{/* 精准匹配 exact属性 只有完全匹配才会去往 */}
<Redirect from="/" to="/Home" exact></Redirect>
{/* 当没有匹配的路由时 path=""|"*" 或不设置 会去往这个页面 */}
<Route path="" component={NotFounted}></Route>
</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'))