警告:无效道具,不应在同一路线中使用Route组件和子组件

时间:2018-06-17 03:36:10

标签: javascript reactjs

我使用BrowserRouter将App作为父组件,将UserInfo作为子组件使用。无法获取数据我收到错误,如我所述,我使用BrowserRouter与App作为父组件,UserInfo作为子。无法获取数据我遇到了错误,如问题所述

//这是我的index.js

t(arreglo)
  

// App.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { BrowserRouter, Switch, Route } from 'react-router-dom'

var UserInfo = require('./Components/UserInfo');

var routes = (
    <BrowserRouter>
        <Route path="/" component={App}>
            <Switch>
                <Route path="user/:username" component={UserInfo} />
            </Switch>
        </Route>
    </BrowserRouter>
);

ReactDOM.render(routes, document.getElementById('root'));
registerServiceWorker();

// UserInfo.js

import React, { Component } from 'react';
import './App.css';
import PropTypes from "prop-types";
import { browserHistory } from 'react-router';

var history = require('react-router').browserHistory;

class App extends Component {
  static contextTypes = {
    router: PropTypes.object
  }
  constructor(props, context) {
     super(props, context);
  }
  submitUser(event) {
    console.log(this.refs.inputUser.value);
    event.preventDefault();
    this.context.router.history.push('/user/${this.refs.inputUser.value}');
  }

  render() {
    return (
      <div>
        <nav className="uk-navbar-container uk-margin" uk-navbar="true">
          <div className="uk-navbar-left">

            <a className="uk-navbar-item uk-logo" href="/">  Github search  &nbsp;
              <span uk-icon="icon: github; ratio: 2.2" className="uk-margin-large-right"></span>
            </a>

            <div className="uk-navbar-item  uk-navbar-right">
              <form onSubmit={this.submitUser}>
                <input className="uk-input uk-form-width-medium"
                  type="text" placeholder="Github UserName...." ref="inputUser" />
                &nbsp;&nbsp;
                <button className="uk-button uk-button-primary">Search &nbsp;
                <span uk-icon="search" className="uk-margin-small-right"></span>
                </button>
              </form>
            </div>
            <div className="uk-navbar-item  uk-navbar-right"></div>
          </div>
        </nav>

        <div className="uk-container-large">
          {this.props.children}
        </div>
      </div>

    );
  }
}

export default App;

2 个答案:

答案 0 :(得分:0)

UserInfo组件中存在一些错误。

  1. 您尚未在构造函数中设置用户的初始状态。
  2. 然后在$ .getJSON()中不需要另一个。你已经得到了响应,只需用响应的用户setState,你就可以了。

    class UserInfo extends React.Component {
      constructor(props) {
        super(props)
         this.state={
            user : "",
          }
    }    
    componentDidMount() {
        this.fetchData();
    }
    componentDidUpdate(prevProps) {
        if (prevProps.params.username !== this.props.params.username) {
            this.fetchData();
        }
    }
    
    fetchData() {
            $.getJSON('https://api.github.com/users/subhanshu')
            .then((res) => {    
               this.setState({ user : res })
            },this);
    }
    
    render() {
        if (!this.state.user) {
            return (
                <div className="uk-child-width-1-3@s uk-grid-match">Loading......</div>
            )
        }
        var user = this.state.user;
    
        return (
            <div className="uk-child-width-1-3@s uk-grid-match" uk-grid>
                <Link to={`/user/${user.login}`}>
                    <div className="uk-grid-small uk-flex-middle" uk-grid>
                        <div className="uk-width-auto">
                            <img className="uk-border-circle" width="60" height="60"
                                src={user.avatar_url} />>
                 </div>
                        <div className="uk-width-expand">
                            <h3 className="uk-card-title uk-margin-remove-bottom">
                                {user.login} ({user.name})
                            </h3>
                            <p className="uk-text-meta uk-margin-remove-top">
                                {user.bio}
                            </p>
                        </div>
                    </div>
                </Link>
            </div>
        );
    }
    }
    

答案 1 :(得分:0)

您的<BrowserRouter>应该是,

<BrowserRouter>
  <Switch>
    <Route path="/" component={App}>
  </Switch>
</BrowserRouter>

如果App不是通用父级,并且仅用于显示UserInfo,则可以在App组件的渲染中添加,

<div className="uk-container-large">
   <Route path="user/:username" component={UserInfo} />
</div>