Fatal编程技术网
  • node.js/
  • Node.js 关于某些案例问题的react warning computedMatch？

Node.js 关于某些案例问题的react warning computedMatch？

node.js reactjs redux

Node.js 关于某些案例问题的react warning computedMatch？,node.js,reactjs,redux,react-redux,Node.js,Reactjs,Redux,React Redux,我有名为isAuthenticated的道具，它还显示一些案例警告在我的控制台中持续存在。请检查一下 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'; impo

我有名为isAuthenticated的道具，它还显示一些案例警告在我的控制台中持续存在。请检查一下

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);
我不明白这是不是一个案例问题，因为我在很多地方都读过，但我得到了不同的答案。上面粘贴的只是主页组件。

来自React

如果试图呈现DOM，将触发未知道具警告 元素中的prop未被React识别为合法DOM 属性/属性。您应该确保您的DOM元素不会 让假道具四处飘浮

在组件内部，您将看到下面的一行

React.cloneElement(child, { location, computedMatch: match })
在这种情况下，
子节点
是您的
，因此会将非标准道具
computedMatch
传递给本机dom节点
，因此React会向您发出健康警告。因此，使用
或
将丢弃警告。

我解决了这个问题删除标记中的标记。或将
替换为

在这种情况下：

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);

import React，{Component}来自“React”；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route}；
从“./Logout_Home”导入LogoutHome；
从“../Components/SignIn”导入SignIn；
从“jwt解码”导入jwt_解码；
从“../actions/authActions”导入{setCurrentUser}；
从“../Components/SignUp”导入注册；
从“../util/setAuthToken”导入setAuthToken；
从“../containers/AboutUs”导入AboutUs；
从“../store”导入存储；
从“react redux”导入{connect}；
//检查代币
if（localStorage.jwtToken）{
//设置身份验证令牌头身份验证
setAuthToken（localStorage.jwtToken）；
//解码令牌并获取用户信息和exp
const decoded=jwt_decode（localStorage.jwtToken）；
//设置用户并进行身份验证
存储调度（setCurrentUser（已解码））；
//检查过期的令牌
const currentTime=Date.now（）/1000；
if（decoded.exp
正如其他人所说，问题在于将
直接放在
元素内部。从：

的所有子元素都应该是
或
元素

因此，虽然显然可以通过将元素包装在片段标记中来消除此错误，但将其包装在
元素中更符合预期用途

没有道具的
应该提供预期的行为。

解决方案很简单，只需在
之后添加另一层
。希望能有所帮助。

我在
交换机
中放置了
div
，因此
路由器dom出现了这个问题。相反，我将
div
移到了
开关的外部，错误消失了
 显示
主页
组件。上面发布的仅是主页组件。请检查更新的问题。好的。。读这个。它为您提供了答案：）那些
是
内部的罪魁祸首，请使用
片段
解决问题。无需上述切换。同样在开关内部。@RaviTeja他需要一些东西，但不是
或任何html dom。。但是
或
将解决这个问题。您能对您的解决方法提供更多的解释吗？

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);