1.withRouter作用:把不是通过路由切换过来的组件中,将react-router 的 history、location、match 三个对象传入props对象上
默认情况下必须是经过路由匹配渲染的组件才存在this.props,才拥有路由参数,才能使用编程式导航的写法,执行this.props.history.push('/detail')跳转到对应路由的页面
然而不是所有组件都直接与路由相连(通过路由跳转到此组件)的,当这些组件需要路由参数时,使用withRouter就可以给此组件传入路由参数,此时就可以使用this.props
2.Redirect渲染<Redirect>将导航到新位置。新位置将覆盖历史堆栈中的当前位置
- to: object
要重定向到的位置。
`
<Redirect to={{
pathname: '/login',
search: '?utm=your+face',
state: { referrer: currentLocation }
}}/>
- push: bool
当为true时,重定向会将新条目推入历史记录,而不是替换当前条目。
`
<Redirect push to="/somewhere/else"/>
- from: string
要重定向的路径名。这只能用于在<Switch>内部呈现<Redirect>时匹配位置。
有关详细信息,请参阅<Switch children>。https://reacttraining.com/web/api/Switch/children-node
`
<Switch>
<Redirect from='/old-path' to='/new-path'/>
<Route path='/new-path' component={Place}/>
</Switch>
import React, { Component } from "react";
import {
BrowserRouter as Router,
Route,
Link,
Redirect,
withRouter
} from "react-router-dom";
////////////////////////////////////////////////////////////
// 1. Click the public page
// 2. Click the protected page
// 3. Log in
// 4. Click the back button, note the URL each time
function AuthExample() {
return (
<Router>
<div>
<AuthButton />
<ul>
<li>
<Link to="/public">Public Page</Link>
</li>
<li>
<Link to="/protected">Protected Page</Link>
</li>
</ul>
<Route path="/public" component={Public} />
<Route path="/login" component={Login} />
<PrivateRoute path="/protected" component={Protected} />
</div>
</Router>
);
}
/*登录控制*/
const fakeAuth = {
isAuthenticated: false,
authenticate(cb) {//登录授权
this.isAuthenticated = true;
setTimeout(cb, 100); // fake async
},
signout(cb) {//退出登录
this.isAuthenticated = false;
setTimeout(cb, 100);
}
};
/*登录成功组件*/
const AuthButton = withRouter(
/*withRouter作用:把不是通过路由切换过来的组件中,将react-router 的 history、location、match 三个对象传入props对象上*/
({ history,location,match }) =>{
// console.log(history);
// console.log(location);
// console.log(match);
return fakeAuth.isAuthenticated ? (//已登录认证就显示下面的组件
<p>
Welcome!{" "}
<button
onClick={() => {//退出按钮
fakeAuth.signout(() => history.push("/"));
}}
>
Sign out
</button>
</p>
) : (//没有登录显示下面的组件
<p>You are not logged in.</p>
)
}
);
/*重定向路由组件,返回的是一个Route路由*/
function PrivateRoute({ component: Component, ...rest }) {
return (
<Route
{...rest}
render={props =>
fakeAuth.isAuthenticated ? (
<Component {...props} />
) : (//没有登录就显示下面的路由匹配到登录组件
<Redirect
to={{
pathname: "/login",
state: { from: props.location }
}}
/>
)
}
/>
);
}
/*公共页面无需登录就能访问*/
function Public() {
return <h3>Public</h3>;
}
/*登录之后访问的组件*/
function Protected() {
return <h3>Protected</h3>;
}
/*登录组件*/
class Login extends Component {
state = { redirectToReferrer: false };//重定向状态
login = () => {//登录方法
fakeAuth.authenticate(() => {
this.setState({ redirectToReferrer: true });//登录进行重定向
});
};
render() {
let { from } = this.props.location.state || { from: { pathname: "/" } };
let { redirectToReferrer } = this.state;
console.log(from);//Object {pathname: "/protected", search: "", hash: "", state: undefined, key: "0hr10n"}
if (redirectToReferrer) return <Redirect to={from} />;//登录之后重定向到来时的这个组件
return (//如果没有登录就显示这个登录组件
<div>
<p>You must log in to view the page at {from.pathname}</p>
<button onClick={this.login}>Log in</button>
</div>
);
}
}
export default AuthExample;