I have this app.js. I try to do an Auth ponent whether it simply act as a middleawre to check whether user has logged in.

const App = props => (
    <BrowserRouter>
        <Provider store={store}>
            <div className="app">
                <Layout>
                <Header>
                    <Navbar />
                </Header>
                <Content>
                    <Route exact path='/' ponent={Home} />
                    <Route exact path='/login' ponent={Login} />
                    <Route exact path='/signup' ponent={Signup} />
                    <Auth>
                        <Route exact path='/task/:id' ponent={Task} />
                    </Auth>
                </Content>
                </Layout>
            </div>
        </Provider>
    </BrowserRouter>
)

But the strange thing is it will trigger when I visit to login and signup route.

My auth.js look like this

import React, { Component } from 'react';

export default class auth extends Component {

    constructor(props) {
        super(props)

        const user = localStorage.getItem('user')
        if(!user) {
            window.location = '/login'
        }
    }

    render() {
        return (
            <div></div>
        );
    }
}

I have this app.js. I try to do an Auth ponent whether it simply act as a middleawre to check whether user has logged in.

const App = props => (
    <BrowserRouter>
        <Provider store={store}>
            <div className="app">
                <Layout>
                <Header>
                    <Navbar />
                </Header>
                <Content>
                    <Route exact path='/' ponent={Home} />
                    <Route exact path='/login' ponent={Login} />
                    <Route exact path='/signup' ponent={Signup} />
                    <Auth>
                        <Route exact path='/task/:id' ponent={Task} />
                    </Auth>
                </Content>
                </Layout>
            </div>
        </Provider>
    </BrowserRouter>
)

But the strange thing is it will trigger when I visit to login and signup route.

My auth.js look like this

import React, { Component } from 'react';

export default class auth extends Component {

    constructor(props) {
        super(props)

        const user = localStorage.getItem('user')
        if(!user) {
            window.location = '/login'
        }
    }

    render() {
        return (
            <div></div>
        );
    }
}

• javascript
• reactjs
• ecmascript-6

Share Improve this question Follow asked Aug 27, 2017 at 9:36 Jenny MokJenny Mok 2,80499 gold badges3333 silver badges6262 bronze badges 4

• Are u using redux?where is the middleware? – RIYAJ KHAN Commented Aug 27, 2017 at 9:51
• @RIYAJKHAN it has nothing to do with redux. – Jenny Mok Commented Aug 27, 2017 at 9:52
• What is log for this const user = localStorage.getItem('user')? – RIYAJ KHAN Commented Aug 27, 2017 at 9:54
• it depends whether my localstorage has user object or not, it doesn't matter, the problem is when I visit localhost:3000/login or localhost:3000/signup the auth ponent still trigger that's the problem. – Jenny Mok Commented Aug 27, 2017 at 9:57

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Routes File

import { Routes, Route } from "react-router-dom"

// Middleware
import AuthGuard from './AuthGuard'

// Pages
import HomePage from '../views/frontend/pages/HomePage'

const AppRouter  = () => {
    return (
        <Routes>
            <Route path="/" element={<HomePage />} />
            <Route path="/about" element={<p>About</p>} />
            <Route path="/dashboard" element={<AuthGuard Component={<p>Dashboard</p>} />} />
        </Routes>
    )

}

export default AppRouter;

Auth Guard File

import React from 'react';
import { Navigate, Outlet } from 'react-router-dom';

const AuthGuard = () => {
    const auth = ( token != null ) ? true : null ;

    // If has token, return outlet in other case return navigate to login page

    return auth ? <Outlet /> : <Navigate to="/login" />;
}

export default AuthGuard

But the strange thing is it will trigger when I visit to login and signup route.

The problem is with this one.

<Auth>
  <Route exact path='/task/:id' ponent={Task} />
</Auth>

Your Auth ponent is getting called by default as there is no Route is wrapped and no condition specified for rendering.

Correct way to do this.

You should use higher order ponent.

<Route exact path='/task/:id' ponent={Auth(Task)} />

Now,this will call your Auth ponent only when your exact task path will match.

Inside of Auth ponent handled the rendering of routed ponent.