Блог

В принципе, у меня есть приложение, в котором вы можете просматривать фильмы (их название, постер, дату, актеров, резюме и т. Д.), И если вы вошли в систему, Добавьте его. Он не использует API для получения этого списка фильмов, поэтому все делается с помощью Redux store. Поэтому я искал в Интернете компонент PrivateRoute, который позволил бы мне перенаправить пользователя на страницу входа (например, если я вошел в систему, протестировал что-то в своем компоненте добавления фильма и что-то изменил, а затем перезагрузил приложение, мое приложение все равно останется на этой странице добавления фильма, даже если я невошел в систему).

Вот мой PrivateRouter (PublicRouter сразу после)

 import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import isLogin from '../utils/isLogin';

const PrivateRoute = ({component: Component, ...rest}) => {
    return (

        // Show the component only when the user is logged in
        // Otherwise, redirect the user to /signin page
        <Route {...rest} render={props => (
            isLogin() ?
                <Component {...props} />
            : <Redirect to="/login" />
        )} />
    );
};

export default PrivateRoute;

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import isLogin from '../utils/isLogin';

const PublicRoute = ({component: Component, restricted, ...rest}) => {
    return (
        // restricted = false meaning public route
        // restricted = true meaning restricted route
        <Route {...rest} render={props => (
            isLogin() amp;amp; restricted ?
                <Redirect to="/dashboard" />
            : <Component {...props} />
        )} />
    );
};

export default PublicRoute;
 

и мой App.js с маршрутами:

 import React, { Component } from 'react'
import { Route, Switch, BrowserRouter as Router} from 'react-router-dom'
import Home from './components/Routes/Home'
import About from './components/Routes/About'
import Login from './components/Routes/Login'
import Navbar from './components/navbar/Navbar'
import Movie from './components/Movie'
import Addon from './components/Routes/Addon'
import PublicRoute from './components/Routes/PublicRoute'
import PrivateRoute from './components/Routes/PrivateRoute'

class App extends Component {
    render () {
        return (
            <Router>
                <div className='the-app'>
                    <Navbar />
                    <Switch>
                        <PublicRoute restricted={false} exact path='/' component={Home}></PublicRoute>
                        <Route path='/about' component={About}></Route>
                        <PublicRoute restricted={true} path='/login' component={Login}></PublicRoute>
                        <PrivateRoute path='/add' component={Addon}></PrivateRoute>
                        <Route path='/:movie_id' component={Movie} />
                    </Switch>
                </div>
            </Router>
        )
    }
}

export default App
 

логическая функция isLogin() (я подключаю ее к хранилищу, так как у меня есть логическое значение isLoggedIn):

 import { connect } from 'react-redux'

const isLogin = () => {
    if(this.props.user.isLoggedIn) {
        return true;
    }
}

const mapStateToProps = (state) => {
    return {
        user: state.user
    }
}

export default connect(mapStateToProps)(isLogin)
 

Я не совсем уверен, в чем причина. Он отлично компилируется и выглядит как обычный компонент / функция React.

РЕДАКТИРОВАТЬ: я исправил ошибку. Он больше не показывает Object(), а не функцию … но ProtectedRoute не будет работать.

 import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import isLogin from '../utils/isLogin';

const PublicRoute = ({component: Component, restricted, ...rest}) => {
    return (
        // restricted = false meaning public route
        // restricted = true meaning restricted route
        <Route {...rest} render={props => (
            isLogin amp;amp; restricted ?
                <Redirect to="/login" />
            : <Component {...props} />
        )} />
    );
};

export default PublicRoute;
 

Частное:

 import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import isLogin from '../utils/isLogin';

const PrivateRoute = ({component: Component, ...rest}) => {
    return (

        // Show the component only when the user is logged in
        // Otherwise, redirect the user to /signin page
        <Route {...rest} render={props => (
            isLogin ?
                <Component {...props} />
            : <Redirect to="/login" />
        )} />
    );
    
};  

export default PrivateRoute
 

Маршрутизатор:

 <Router>
                <div className='the-app'>
                    <Navbar />
                    <Switch>
                        <PublicRoute restricted={false} exact path='/' component={Home}></PublicRoute>
                        <Route path='/about' component={About}></Route>
                        <PublicRoute restricted={false} path='/login' component={Login}></PublicRoute>
                        <PrivateRoute path='/add' component={Addon}></PrivateRoute>
                        <Route path='/:movie_id' component={Movie} />
                    </Switch>
                </div>
            </Router>
 

Попробуйте это

 const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props => {
      return isLogin() amp;amp; restricted ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{
            pathname: "/login",
            state: { from: props.location },
          }}
        />
      );
    }}
  />
);