全新的反应,在"登录"页面上单击提交后尝试重定向到"主页"。尝试按照反应路由器教程进行操作。
当我单击表单和控制台上的提交按钮时,记录状态和 fakeAuth.isAuthenticated,它们都返回 true。但是,重定向未触发。
登录.js
class Login extends Component {
constructor(props) {
super(props);
this.state = {
portalId: "",
password: "",
redirectToReferrer: false
}
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e) {
fakeAuth.authenticate(() => {
this.setState({
portalId: this.refs.portalId.value,
password: this.refs.password.value,
redirectToReferrer: true
})
})
e.preventDefault();
}
render() {
const redirectToReferrer = this.state.redirectToReferrer;
if (redirectToReferrer === true) {
<Redirect to="/home" />
}
路线.js
export const fakeAuth = {
isAuthenticated: false,
authenticate(cb) {
this.isAuthenticated = true
setTimeout(cb, 100)
},
signout(cb) {
this.isAuthenticated = false
setTimeout(cb, 100)
}
}
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={() => (
fakeAuth.isAuthenticated === true
? <Component {...this.props}/>
: <Redirect to="/" />
)}/>
)
export default () => (
<BrowserRouter>
<div>
<Navbar />
<Switch>
<Route path="/" exact component={Login} />
<Route path="/register" exact component={Register} />
<Route path="/home" exact component={Home} />
</Switch>
</div>
</BrowserRouter>
);
在渲染方法中返回Redirect
(否则它不会被渲染,因此不会发生重定向(:
render() {
const redirectToReferrer = this.state.redirectToReferrer;
if (redirectToReferrer) {
return <Redirect to="/home" />
}
// ... rest of render method code
}
可以通过使用 withRouter
将<Redirect to="/home" />
与this.props.history.push("/home");
交换来重定向到"主页"。不知道为什么第一种方法不起作用。
对于使用 Hooks 的人,请看这里 -> https://reactrouter.com/web/api/Hooks/usehistory使用示例:
import { useHistory } from "react-router-dom";
let history = useHistory();
const onSubmit = () => {
//code
history.push(`/${link}/${object.id}`)
}
useNavigate
钩子对我有用。在 react-router-dom v6 中,useHistory
被替换为 useNavigate
。这是为我解决问题的代码:
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
const onSubmit = () => {
e.preventDefault();
// do what you want with your form data
navigate('/my-path');
}
当我们在路由器声明之外使用时。你可以只使用
this.props.history.push('/url'(
在函数调用中。应该与反应路由器 dom 一起工作