React路由器一直呈现错误的页面
React路由器一直呈现错误的页面
提问于 2018-09-16 16:55:53
整个周末都在做这个。在页面刷新时，React路由器会先路由到/login页面，然后路由到主页"/“。
ReactDOM.render(
<Provider store={store}>
<Router>
<Switch>
<Route path="/login" component={Login} />
<AuthenticatedComponent>
<Header />
<Route path="/" component={App} exact />
</AuthenticatedComponent>
</Switch>
</Router>
</Provider>,
document.getElementById("root")
);我试着移动路线，但这不起作用-没有错误，它只是做同样的事情。我要说的一件事就是。“如果用户已登录(非空)，请立即将其路由到主页"/”。这是在{ Login }组件中完成的，并写入以下内容：
componentWillReceiveProps(props) {
if(props.user !== null) {
props.history.push('/')
}
}这就像一个护身符。问题是，每当我刷新浏览器时，url会立即转到/login，然后转到"/"，这就是主页。我添加了AuthenticatedComponent包装器作为最后的测试。我在这个组件中编写了以下代码：
componentWillMount(){
if( this.props.user !== null) {
this.props.history.push('/')
} else {
this.props.history.push('/login')
}
}我没有收到任何错误-功能只是有点关闭
回答 1
Stack Overflow用户
发布于 2018-09-17 00:03:29
将<Switch>与您的<AuthenticatedComponent>一起包装(并将<Header />移动到您的身份验证组件中)。
或者创建HOC Wrapper component (如果某些路由需要身份验证，而有些路由不需要身份验证，则模块化且非常有用)。
工作示例：https://codesandbox.io/s/5m2690nn6n
RequireAuth.js
import React, { Component, Fragment } from "react";
import { withRouter } from "react-router";
import Login from "./Login";
import Header from "./Header";
class RequireAuth extends Component {
state = { isAuthenticated: false };
componentDidUpdate = (prevProps, prevState) => {
if (this.props.location.pathname !== prevProps.location.pathname && !this.state.isAuthenticated) {
this.props.history.push("/");
}
};
isAuthed = () => this.setState({ isAuthenticated: true });
unAuth = () => this.setState({ isAuthenticated: false });
render = () => (
!this.state.isAuthenticated
? <Login isAuthed={this.isAuthed} />
: <Fragment>
<Header unAuth={this.unAuth} />
{this.props.children}
</Fragment>
);
}
export default withRouter(RequireAuth);index.js
import React from "react";
import { render } from "react-dom";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import Home from "../components/Home";
import Players from "../components/Players";
import Schedule from "../components/Schedule";
import RequireAuth from "./components/RequireAuth";
import "uikit/dist/css/uikit.min.css";
render(
<BrowserRouter>
<RequireAuth>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/players" component={Players} />
<Route path="/schedule" component={Schedule} />
</Switch>
</RequireAuth>
</BrowserRouter>,
document.getElementById("root")
);对于使用react-router v3的任何人：
index.js
render (
<Router>
<Route path="/" component={RequireAuth}>
<IndexRoute component={Home} />
<Route path="players" component={Players} />
<Route path="schedule" component={Schedule} />
</Route>
</Router>, document.getElementById("root")
);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52352546
复制相关文章
相似问题