[英]React Router 3 not rendering correct component
I have a component I am using for authentication, if a user is not authenticated I want to push them to the login page. 我有一个用于身份验证的组件,如果用户未通过身份验证,我想将其推送到登录页面。
A basic example of the setup is... 设置的基本示例是...
Auth Component 验证组件
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { auth } from '../../firebase';
import { replace } from 'react-router-redux';
export default (WrappedComponent, {}) => {
class Authentication extends Component {
componentWillMount() {
auth.onAuthStateChanged(user => {
if (user) {
// User is signed in.
console.log('USER IS SIGNED IN');
} else {
// No user is signed in.
console.log('USER IS NOT SIGNED IN');
this.props.dispatch(replace('login'));
}
});
}
render() {
return <WrappedComponent>{this.props.children}</WrappedComponent>;
}
}
return connect(
null,
null
)(Authentication);
};
Routes 路线
import React from 'react';
import Loadable from 'react-loadable';
import { Router, Route, IndexRoute } from 'react-router';
import AuthenticationComponent from './containers/Authentication';
import App from './components/App';
const AsyncRoute = loader =>
Loadable({
loader,
loading: () => <h3>Loading...</h3>,
delay: 300,
});
const LandingPage = AsyncRoute(() =>
import(/* webpackPrefetch: true, webpackChunkName: "landingPage" */ './containers/LandingPage')
);
const Login = AsyncRoute(() =>
import(/* webpackPrefetch: true, webpackChunkName: "login" */ './containers/Login')
);
const NotYetImplemented = () => <h6>Not Yet Implemented...</h6>;
export default ({ history }) => (
<Router history={history}>
<Route path="/" component={AuthenticationComponent(App, {})}>
<IndexRoute component={LandingPage} />
</Route>
<Route path="/login" component={Login} />
</Router>
);
Currently, when Firebase
reports the user is not authenticated, the route is updated and shows as http://localhost:3001/login
however the LandingPage
component is rendered. 当前,当Firebase
报告用户未通过身份验证时,该路由会更新并显示为http://localhost:3001/login
但会呈现LandingPage
组件。
If I refresh the page on /login
I do then get the correct component. 如果我刷新/login
上的页面,则可以获取正确的组件。
I have swapped out replace
for push
but had the same result. 我已经换出replace
的push
,但有相同的结果。
like @Boo said you have to use exact or you can use switch and Route instead like this 像@Boo一样,您必须使用完全相同,也可以像这样使用switch和Route
import { Switch, Route} from 'react-router-dom'
<Switch>
<Route path='/' component={ HomePage } exact />
<Route path='/login' component={ LogIn } exact />
</Switch>
and using 和使用
Redirect 重新导向
you can do something like this (the code below) instead of dispatching action in redux and this will work for sure 您可以执行以下操作(下面的代码),而不是在redux中分派操作,这肯定会起作用
import { Redirect } from 'react-router'
export default (WrappedComponent, {}) => {
class Authentication extends Component {
state = { redirect : false }
componentWillMount() {
auth.onAuthStateChanged(user => {
if (user) {
// User is signed in.
console.log('USER IS SIGNED IN');
} else {
// No user is signed in.
console.log('USER IS NOT SIGNED IN');
//this.props.dispatch(replace('login'));
this.setState({redirect : true})
}
});
}
render() {
const {redirect } = this.state
if(!redirect){
return <WrappedComponent>{this.props.children}</WrappedComponent>;
} else {
return <Redirect to='where ever you want' />
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.