Skip to content
Advertisement

React Router Dom : Warning: Received `true` for a non-boolean attribute `exact`

I applied all possibility but this console warning not gone.

Warning: Received true for a non-boolean attribute exact.if you want to write it to the DOM, pass a string instead: exact=”true” or exact={value.toString()}.

<Switch>
   <Route exact={true} path="/" component={Home} />
</Switch>

I also applied this possibility but not solved my problem:

<Route exact path="/" component={Home}/>
<Route exact="true" path="/" component={Home}/>

Full Code:

Urls.js:

import React from 'react'
import { Route, Switch } from 'react-router-dom';
...


Axios.defaults.withCredentials = true
Axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";
Axios.defaults.xsrfCookieName = "csrftoken";

const Urls = () => {
    return (
        <div>
            <Switch>
                <Route exact path="/" component={Home} />  ⬅⬅⬅⬅⬅⬅
                <Route path="/login" component={Login} />
                <Route path="/logout" component={Logout} />
                <Route path="/register" component={Register} />
                ......

                <Route component={Error} />
            </Switch>
        </div>
    )
}

export default Urls;

Home.js:

import React, { Fragment, useContext } from 'react';
import { NavLink } from 'react-router-dom';
import { Helmet } from 'react-helmet';
import ArticleList from './ArticleList';
import { Authcontext } from '../context_api(redux)/create_context/authcontext';

const Home = () => {

    const { state, } = useContext(Authcontext);

    return (
        <Fragment>

            <Helmet>
                <title>Home Page</title>
            </Helmet>

            {!localStorage.getItem("auth_id") ?
                <div className='text-right m-2'>
                    <NavLink exact className='navbar__btn' to="/register" activeClassName="mylink"> Register</NavLink>
                    <NavLink exact className='navbar__btn' to="/login" activeClassName="mylink">Login</NavLink>
                </div>
                :
                <div className='text-right m-2'>
                    <NavLink exact className='navbar__btn' to="/logout" activeClassName="mylink">Logout</NavLink>
                    <NavLink exact className='navbar__btn' to="/change_password" activeClassName="mylink">Change Password</NavLink>
                    <NavLink exact className='navbar__btn' to="/my_profile" activeClassName="mylink">My Profile</NavLink>
                    <ArticleList />
                </div>
            }

        </Fragment>
    )
}

export default Home

Register.js:

const Register = () => {
....
    <div className='register__already'>
      Already have an account? <Link exact to="/login">Login</Link>
    </div>
...
};

export default Register;

Screenshot :

No any console error

enter image description here

but when click on register then below console error occured:

enter image description here

Advertisement

Answer

Looks like the error is coming from here in Register.js

const Register = () => {
....
    <div className='register__already'>
      Already have an account? <Link exact to="/login">Login</Link>
    </div>
...
};

export default Register;

more specifically, <Link exact to="/login">Login</Link> You only use exact with the <NavLink> component so that you can apply an active class to it if you’re currently on that route. If you have this link as just <Link to "/login">Login</Login> it should be good 🙂 Looks like you already got the answer in the comments, but figured I’d add it here.

Advertisement