How to use Exact in react js?

JavaScript
1

Hi All,

I do not know why I have been getting this error on my console, can anyone please let me know what are the ways I can get rid of this below error and why am I seeing this while the app works fine for me. I tried to correct the value using exact=“true” but has same issue


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()}.

The code which has exact in my nav component is as below

<div className="nav_menu">
            <NavLink exact activeClassName= "active_link"  to='/home' className="navitems"   > Home  </NavLink>
            <NavLink exact activeClassName= "active_link"  to='/about'className="navitems" > About </NavLink>
            <NavLink exact activeClassName= "active_link"  to = '/products' className="navitems" > Products </NavLink>
            <IconButton className="account_icon" >
                <AccountCircleIcon fontSize="small" />
            </IconButton>
            
            </div>

The code which has another exact is on my app.js

<Navbar handleChange = {handleChange} searchText = {searchText}/>
    <Switch>
    <Route exact path="/" component={`${Home}`}/>
    <Route path="/home" component={Home}/>
    <Route path="/about" component={About}/>
    <Route path="/products" render= { (props) => <Products {...props} searchText={searchText} /> }/>
    <Route path="/signup" component={Signup}/>
    <Route path="/signin" component={Signin}/>
    <Route component={Error}/>
    </Switch>

Thanks

2

We need a little bit more context: you need to show some code that explains what you’re trying to do here, it’s not really possible to help without knowing that

1 Like
3

Hi @DanCouper I have updated the code where am using exact. please let me know if anything else is missing

4

exact isn’t defined for the <Route> components that match those link URLs (home, about and products), so exact can only ever be false for those nav links. You can’t set it to true for them without actually specifying that the routes should be exact

1 Like
5

So what would be right solution to thi ? How can I change my code ? @DanCouper any example
?

6

You don’t have exact on the route components with those URLs, you need to add exact to those components

1 Like
7

Hi There are no changes it seems like the error is same

8

I can’t see what you can see on your computer screen, it would be extremely helpful to put up an example on something like Code Sandbox

9

Sure will do the needful ASAP no worries @DanCouper you are really helping me learning react to best ways. Thanks a million sir

1 Like
10

Thanks for all your help. I finally found the solution here . The issue was with link tag where I added exact as told a youtuber. But while i was reading through the debugging article and went to main issue I found the Link tag does not need exact thing with it.

https://www.pluralsight.com/guides/understanding-links-in-reactjs

11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.