Javascript 警告：道具无效，不应在同一路线中使用路线组件和子级

我正在使用BrowserRouter，应用程序作为父组件，用户信息作为子组件。无法获取数据我遇到问题中提到的错误我正在使用BrowserRouter，应用程序作为父组件，用户信息作为子组件。无法获取数据我遇到问题中提到的错误

//这是我的index.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();

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./App”导入应用程序；
从“./registerServiceWorker”导入registerServiceWorker；
从“react router dom”导入{BrowserRouter，Switch，Route}
var UserInfo=require（'./组件/UserInfo'）；
变量路由=(
);
render（routes，document.getElementById（'root'）；
registerServiceWorker（）；

//App.js

import React，{Component}来自'React'；
导入“/App.css”；
从“道具类型”导入道具类型；
从“react router”导入{browserHistory}；
var history=require（'react-router'）。浏览器历史记录；
类应用程序扩展组件{
静态上下文类型={
路由器：PropTypes.object
}
构造函数（道具、上下文）{
超级（道具、背景）；
}
提交人（活动）{
log（this.refs.inputUser.value）；
event.preventDefault（）；
this.context.router.history.push（'/user/${this.refs.inputUser.value}'）；
}
render（）{
返回(
搜寻
{this.props.children}
);
}
}
导出默认应用程序；

//UserInfo.js

import React, { Component } from 'react';
import { BrowserRouter, Link } from 'react-router-dom'

var $ = require('jquery');

class UserInfo extends Component {
    constructor(props) {
        super(props)
    }
    getInitialState() {
        return {};
    }

    componentDidMount() {
        this.fetchData();
    }
    componentDidUpdate(prevProps) {
        if (prevProps.params.username !== this.props.params.username) {
            this.fetchData();
        }
    }

    fetchData() {
        $.getJSON('https://api.github.com/users/${this.props.params.username}')
            .then(res => res.json())
            .then((user) => {
                this.setState = { user: user }
            });
    }

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

export default UserInfo;

import React，{Component}来自'React'；
从“react router dom”导入{BrowserRouter，Link}
var$=require（'jquery'）；
类UserInfo扩展组件{
建造师（道具）{
超级（道具）
}
getInitialState（）{
返回{}；
}
componentDidMount（）{
这是fetchData（）；
}
componentDidUpdate（prevProps）{
if（prevProps.params.username！==this.props.params.username）{
这是fetchData（）；
}
}
fetchData（）{
$.getJSON（'https://api.github.com/users/${this.props.params.username}'）
.then（res=>res.json（））
。然后（（用户）=>{
this.setState={user:user}
});
}
render（）{
如果（！this.state.user）{
返回(
加载。。。。。。
)
}
var user=this.state.user；
返回(
>
{user.login}（{user.name}）

{user.bio}

);
}
}
导出默认用户信息；

用户信息组件中有一些错误

您尚未在构造函数中设置用户的初始状态

不需要在$.getJSON（）中再添加一个。您已经得到了响应，只需使用响应设置用户状态，就可以开始了

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

类UserInfo扩展了React.Component{ 建造师（道具）{ 超级（道具） 这个州={ 用户：“”， } } componentDidMount（）{ 这是fetchData（）； } componentDidUpdate（prevProps）{ if（prevProps.params.username！==this.props.params.username）{ 这是fetchData（）； } } fetchData（）{ $.getJSON（'https://api.github.com/users/subhanshu') .然后（（res）=>{ this.setState（{user:res}） }，这个）； } render（）{ 如果（！this.state.user）{ 返回( 加载。。。。。。 ) } var user=this.state.user； 返回( > {user.login}（{user.name}）

{user.bio}

); } }

你的

应该是

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

---

您使用的是哪个版本的react路由器？“react”：“^16.4.1”、“react类”：“^3.2.2”、“react dom”：“^16.4.1”、“react路由器dom”：“^4.3.1”、“react路由器dom”：“^4.3.1”、“react脚本”：“1.1.4”您尝试过更换交换机吗？将交换机更换为？只需更换它！不需要使用它。

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

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