react warning computedMatch regarding some case issues?
Solution 1
From React doc
The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around.
Inside the <Switch>
component, you will see the below line.
React.cloneElement(child, { location, computedMatch: match })
In this case, the child
is your <div></div>
, so a non standard props computedMatch
are being passed to native dom node <div>
, thus React gives you an healthy warning. So, using <>
or <Fragment>
will discard the warning.
Solution 2
As others have said, the issue comes from having a <div>
directly inside of a <Switch>
element. From the documentation for <Switch>
:
All children of a
<Switch>
should be<Route>
or<Redirect>
elements.
So while you apparently can get rid of this error by wrapping your element in a fragment tag, it's more in-line with the intended usage to wrap it in a <Route>
element instead.
A <Route>
with no props should provide the intended behavior.
Solution 3
I solve that issue remove <div>
tag inside the tag. or replace <div>
with <React.Fragment>
.
in this case :
import React,{Component} from "react";
import {BrowserRouter as Router, Switch, Route} from "react-router-dom";
import LogoutHome from './Logout_Home';
import SignIn from '../Components/SignIn';
import jwt_decode from 'jwt-decode';
import {setCurrentUser} from '../actions/authActions';
import SignUp from '../Components/SignUp';
import setAuthToken from '../util/setAuthToken';
import AboutUs from '../containers/AboutUs';
import store from '../store';
import {connect} from "react-redux";
// check for TOKEN
if (localStorage.jwtToken) {
// Set auth token header auth
setAuthToken(localStorage.jwtToken);
// Decode token and get user info and exp
const decoded = jwt_decode(localStorage.jwtToken);
// Set user and isAuthenticated
store.dispatch(setCurrentUser(decoded));
// Check for expired token
const currentTime = Date.now() / 1000;
if (decoded.exp < currentTime) {
// Logout user
store.dispatch(logoutUser());
// Redirect to login
window.location.href = '/login';
}
}
class HomePage extends Component
{
componentDidMount(){
console.log(this.props.auth.isAuthenticated);
}
render(){
var {
isAuthenticated
} = this.props.auth;
return(
<div>
<Router>
<div>
<Switch>
{this.props.auth.isAuthenticated===false ? (
<React.Fragment>
<Route exact path='/' component={LogoutHome}/>
<Route path='/Finance/Login' component={SignIn}/>
<Route path='/Finance/AboutUs' component={AboutUs}/>
<Route path='/Finance/ContactUs' component={ContactUs}/>
<Route path='/Finance/SignUp' component={SignUp}/>
<Route path='/Finance/Forgotpassword' component={Forgotpassword}/>
</React.Fragment>
) : (
<React.Fragment>
<Route path='/Finance/Home' component={Home}/>
</React.Fragment>
)}
</Switch>
</div>
</Router>
</div>
);
}
}
function mapStateToProps(state){
return{
auth : state.auth
};
}
export default connect(mapStateToProps)(HomePage);
Solution 4
I had this issue with react-router-dom
because I placed a div
inside my Switch
. Instead, I moved my div
outside of my Switch
and the error is gone.
Solution 5
The solution is simple, just add another layer of <React.Fragment>
after <Switch>
. Hope it helps.
Yash Choksi
Working at Abbvie aesthetics as Machine Learning Engineer primarily focus on Computer Vision engineer. Solved many state-of-the-art CNN and DNNs. Having experience of more than 2 years in Computer Vision area. Developed many complex problems in the area of image segmentation and classification and object detection. Last project which I loved to work is hair detection and removal form facial region. Open to work on more cool projects you can reach me on this email: [email protected]. Please don't forget to mention STACK OVERFLOW PROFILE found in subject. Linkedin: https://www.linkedin.com/in/choksiyash/ Cheers!
Updated on July 09, 2022Comments
-
Yash Choksi almost 2 years
I have props named as isAuthenticated and it also shows that some case warning persists in my console. Please check it.
import React,{Component} from "react"; import {BrowserRouter as Router, Switch, Route} from "react-router-dom"; import LogoutHome from './Logout_Home'; import SignIn from '../Components/SignIn'; import jwt_decode from 'jwt-decode'; import {setCurrentUser} from '../actions/authActions'; import SignUp from '../Components/SignUp'; import setAuthToken from '../util/setAuthToken'; import AboutUs from '../containers/AboutUs'; import store from '../store'; import {connect} from "react-redux"; // check for TOKEN if (localStorage.jwtToken) { // Set auth token header auth setAuthToken(localStorage.jwtToken); // Decode token and get user info and exp const decoded = jwt_decode(localStorage.jwtToken); // Set user and isAuthenticated store.dispatch(setCurrentUser(decoded)); // Check for expired token const currentTime = Date.now() / 1000; if (decoded.exp < currentTime) { // Logout user store.dispatch(logoutUser()); // Redirect to login window.location.href = '/login'; } } class HomePage extends Component { componentDidMount(){ console.log(this.props.auth.isAuthenticated); } render(){ var { isAuthenticated } = this.props.auth; return( <div> <Router> <div> <Switch> {this.props.auth.isAuthenticated===false ? ( <div> <Route exact path='/' component={LogoutHome}/> <Route path='/Finance/Login' component={SignIn}/> <Route path='/Finance/AboutUs' component={AboutUs}/> <Route path='/Finance/ContactUs' component={ContactUs}/> <Route path='/Finance/SignUp' component={SignUp}/> <Route path='/Finance/Forgotpassword' component={Forgotpassword}/> </div> ) : ( <div> <Route path='/Finance/Home' component={Home}/> </div> )} </Switch> </div> </Router> </div> ); } } function mapStateToProps(state){ return{ auth : state.auth }; } export default connect(mapStateToProps)(HomePage);
And the warning is some like this:
index.js:2178 Warning: React does not recognize the `computedMatch` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `computedmatch` instead. If you accidentally passed it from a parent component, remove it from the DOM element. in div (at Homepage.js:50) in Switch (at Homepage.js:48) in div (at Homepage.js:47) in Router (created by BrowserRouter) in BrowserRouter (at Homepage.js:46) in div (at Homepage.js:45) in HomePage (created by Connect(HomePage)) in Connect(HomePage) (at App.js:10) in div (at App.js:9) in App (at index.js:10) in Provider (at index.js:9)
I am not understanding weather it's case issue or what because I read it at many place but different answers I am getting. Above pasted is homepage component only.