[英]Redirect user to a Login Route on start of the application in react-redux
I am new to the react-redux
. 我是react-redux
新手。 Here, what I want to do is that, when user hits the url lets say , localhost:3000
then user should directly move to the src/index.js localhost:3000/login page . 在这里,我想做的是,当用户点击url时说localhost:3000
那么用户应该直接移动到src / index.js localhost:3000 / login页面。 And If user knows some routes and hits them without login then also it should redirect it to the login page. 并且,如果用户知道某些路由并在没有登录的情况下点击它们,那么它也应该将其重定向到登录页面。
for that , what I have tried, 为此,我尝试了
**Home.js**
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import App from './App';
import LoginComponent from './Components/loginComponent/LoginComponent';
class Home extends React.Component {
render() {
const rootPath = "/";
return (
<Switch>
<Route path={rootPath} component={App}/>
</Switch>
)
}
}
export default Home
**App.js**
import React from 'react';
import './App.css';
import { Provider } from 'react-redux';
import Main from './Containers/Main/Main';
import configureStore from './AppStore'
const store = configureStore()
class App extends React.Component {
render() {
return (
<Provider store={store}>
<div className="container-fluid">
<Main />
</div>
</Provider>
)
}
}
export default App
**Main.js**
import React from 'react';
import { Route, Redirect } from 'react-router';
import LoginComponent from '../../Components/loginComponent/LoginComponent';
import { LOGIN_REDIRECT_URL } from './../../Constants/AppConstants';
export default class Main extends React.Component {
constructor(props) {
super(props);
this.state = {
error: false,
hasUserLogedIn: false
}
}
render() {
const template =
!this.props.hasUserLogedIn
? (
<Route path="/*" render={(props) => <LoginComponent />}/>
) : (
<span>After login </span>
)
return (
<div>
{template}
</div>
)
}
}
function mapStateToProps(state) {
}
So, In the last file, I am doing that redirection, but it is not working. 因此,在上一个文件中,我正在执行该重定向,但是它不起作用。 can any one help me with this ? 谁能帮我这个 ? Because of the /*
it is redirecting user to same view. 由于/*
它将用户重定向到同一视图。
You can use public and private routes: 您可以使用公共和私人路线:
const PrivateRoute = ({ component: Component, ...rest, loggedIn }) => (
<Route
{...rest}
render={props =>
(loggedIn ? (
<Component {...props} />
) : (
<Redirect
to={{
pathname: LOGIN,
state: { from: props.location },
}}
/>
))
}
/>
);
const PublicRoute = ({ component: Component, ...rest, loggedIn}) => (
<Route
{...rest}
render={props =>
(!loggedIn ? (
<Component {...props} />
) : (
<Redirect
to={{
pathname: HOME,
state: { from: props.location },
}}
/>
))
}
/>
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.