J'ai des accessoires nommés isAuthenticated et cela montre également que certains avertissements de cas persistent dans ma console. S'il te plaît vérifie le.
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);
Et l'avertissement ressemble à ceci:
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)
Je ne comprends pas la météo, c'est un problème de cas ou quoi parce que je l'ai lu à plusieurs endroits mais des réponses différentes que j'obtiens. Ci-dessus collé est uniquement le composant de la page d'accueil.
De React doc
L'avertissement unknown-prop se déclenchera si vous essayez de rendre un élément DOM avec un accessoire qui n'est pas reconnu par React comme un attribut/propriété DOM légal. Vous devez vous assurer que vos éléments DOM ne ont des accessoires faux flottant autour.
À l'intérieur de <Swtich>
composant, vous verrez la ligne ci-dessous.
React.cloneElement(child, { location, computedMatch: match })
Dans ce cas, le child
est votre <div></div>
, donc un accessoire non standard computedMatch
est passé au nœud dom natif <div>
, donc React vous donne un avertissement sain. Donc, en utilisant <>
ou <Fragment>
supprimera l'avertissement.
Je résous ce problème supprimer<div>
tag à l'intérieur du tag. ou remplacer<div>
avec <React.Fragment>
.
dans ce cas :
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);