me
需要给<Route/> 套个<Switch></Switch>
PrivateRoute.jsx
私有路由
import React from "react";
import { Route, Redirect } from "react-router-dom";
function PrivateRoute(props) {
const isLogin = localStorage.getItem("token") ? true : false;
return isLogin ? (
<Route
path={props.path}
render={() => <props.component></props.component>}
></Route>
) : (
<Redirect to="/login" />
);
}
export default PrivateRoute;
App.js
import React from "react";
// import { BrowserRouter as Router, Route, Link } from "react-router-dom"; 不建议使用浏览器历史记录路由BrowserRouter
import {
HashRouter as Router,
Route,
Link,
// withRouter,
BrowserRouter,
Switch,
} from "react-router-dom";
import "./App.css";
import People from "./pages/People";
import { Button } from "antd";
import List from "./pages/List";
import About from "./pages/About";
import Login from "./pages/Login";
import PrivateRoute from "./pages/PrivateRoute";
const Home = (props) => {
const { history } = props;
return (
<div>
<h1>我是首页</h1>
<Button onClick={() => history.push("/list")}>列表页</Button>
<Button onClick={() => history.push("/about")}>关于我们</Button>
</div>
);
};
/* const About = (props) => {
console.log(props);
return <h1>有什么有什么要联系我们的吗,欢迎您哦</h1>;
};
const AboutPage = withRouter(About); */
function App() {
return (
<Router>
<div className="App">
<ul>
<li>
<Link to="/">首页</Link>
</li>
<li>
<Link to="/list?t=ttt">列表</Link>
</li>
<li>
<Link to="/people">People</Link>
</li>
</ul>
<hr />
<div className="content">
<Switch>
{/* 如果不加exact的话 每个页面都会有/那么每个页面都会有Home页这个内容 */}
<Route path="/" exact component={Home}></Route>
{/* <Route path="/list" component={List}></Route>
<Route path="/people" component={People}></Route>
*/}
{/* 因为希望list、people这两个页面是在登陆之后才可以访问的,所以可以加上私有路由 也就是将Route改成PrivateRoute */}
<PrivateRoute path="/list" component={List}></PrivateRoute>
<PrivateRoute path="/people" component={People}></PrivateRoute>
<Route path="/about" render={() => <About />}></Route>
<Route path="/login" render={() => <Login />}></Route>
</Switch>
</div>
</div>
</Router>
);
}
export default App;
List、Login、People这三个页面 需要使用withRouter
也就是 用到了PrivateRoute 和render路由形式的 都需要用到 withRouter
List.jsx
import React from "react";
import { withRouter } from "react-router-dom";
function List(props) {
console.log(props);
// 路由组件中会包含
// history
// location
// match
// 此处可以使用new URLSearchParams获取当前查询条件
// 使用模块qs也能获取查询条件
const params = new URLSearchParams(props.location.search);
console.log(params.get("t"));
return (
<div>
<h1>我是一个列表页</h1>
</div>
);
}
export default withRouter(List);
teacher的
主要是这两个页面和自己的有所区别,其他的页面都一样
PrivateRoute.jsx
import React from "react";
import { Route, Redirect } from "react-router-dom";
// 此处定义一个私有路由 需要登录之后才能访问
function PrivateRoute({ children, ...rest }) {
const isLogined = localStorage.getItem("token") ? true : false;
// const rest = { ...props };
// delete rest.children;
// console.log(rest);
console.group("私有路由判断");
console.log(isLogined);
console.groupEnd();
return (
<Route
{...rest}
render={() => (isLogined ? children : <Redirect to="/login" />)}
/>
);
}
export default PrivateRoute;
App.js
import React from "react";
import {
HashRouter as Router,
Route,
Link,
NavLink,
Switch,
} from "react-router-dom";
import { Button } from "antd";
import List from "./components/List";
import "./App.css";
import People from "./components/People";
import About from "./pages/About";
import PrivateRoute from "./components/PrivateRoute";
import Login from "./pages/Login";
const Home = (props) => {
const { history } = props;
return (
<div>
<h1>首页</h1>
<Button
onClick={() => {
// 使用编程式跳转
history.push("/list");
}}
>
列表页
</Button>
<Button
onClick={() => {
// 使用编程式跳转
history.push("/about");
}}
>
关于我们
</Button>
</div>
);
};
// const About = (props) => {
// console.log(props);
// return <h1>About us</h1>;
// };
// // 此处为高阶组件
// // 其实就是js中的高阶函数
// // withRouter是一个函数,接收一个组件作为参数,为组件添加一些路由属性信息
// const AboutPage = withRouter(About);
function App() {
return (
<Router>
<div className="App">
<ul>
<li>
<NavLink exact to="/" isActive={() => true}>
首页
</NavLink>
</li>
<li>
<NavLink to="/list?t=cart">列表</NavLink>
</li>
<li>
<NavLink to="/p/oooo">People</NavLink>
</li>
</ul>
<hr />
{/* Route是一个组件 */}
<div className="container">
{/* Switch 只会匹配一个路由内容 ,PrivateRoute就可以用了,如果不加Switch,所有的就会都走一遍而产生冲突导致报错*/}
<Switch>
<Route path="/login" render={() => <Login />} />
{/* exact 表示完全匹配 */}
<Route path="/" exact component={Home} />
<PrivateRoute path="/list">
<List />
</PrivateRoute>
<PrivateRoute path="/p/:o">
<People />
</PrivateRoute>
{/* render方式渲染组件,没有直接使用component指定组件
这时候在路由对应的组件中没有history和location等路由的属性信息
*/}
<Route path="/about" render={() => <About />} />
</Switch>
</div>
</div>
</Router>
);
}
export default App;