withRouter 参数解析 Invariant Violation 时出错：您不应在 <Router> 之外使用 <Route> 或 withRouter()答案

【问题标题】：Error in withRouter params parsing Invariant Violation: You should not use <Route> or withRouter() outside a <Router>withRouter 参数解析 Invariant Violation 时出错：您不应在 <Router> 之外使用 <Route> 或 withRouter()
【发布时间】：2018-09-09 16:15:04
【问题描述】：

所以我一直在尝试使用 withRouter 传递参数，但我发现 Invariant Violation 出现错误：您不应该在路由器之外使用 Route 或 withRouter()

你们中有人知道如何解决吗？或传递参数使用 withRouter 旁边的任何东西？

这是我的代码

import React, { Component } from 'react';
import dummy_database from '../../file_source/dummy_database.json';
import {withRouter} from 'react-router';
import './css/description.css';

class Description extends Component {
    render() {
        var id = parseInt(this.props.match.params.id, 10);
        var contentKeys = Object.keys(dummy_database.products);
        var products = contentKeys.map((t) => 
            <p key={t}>{dummy_database.products[t]}</p>
        );

        var description='';

        for(var i = 0; i < products.length; i++){
            if(dummy_database.products[i].id === id){
                description = dummy_database.products[i].description;
            }
        }
        return (
            <div className="description">
                <div className="descriptionTitle">
                    <h3>Description</h3>
                </div>
                <div className="descriptionText">
                    {description}
                </div>
            </div>
        );
    }
}

export default withRouter(Description);

这是我使用的按钮代码

import React, { Component } from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import Details from '../../pages/details/details';


class ViewButton extends Component {
    refreshPage() {
        window.location.reload();
    }

    render() {

        var link = 'details/' + this.props.id;
        return (
            <div>
                <BrowserRouter>
                    <button>
                        <Link to={link} onClick={this.refreshPage}>View Detail</Link>
                    </button>
                    <Route path={link} component={Details} />
                </BrowserRouter>
            </div>
        );
    }
}
export default ViewButton;

提前致谢

【问题讨论】：

你确定这个组件是 React Router 声明的子组件（在任何级别）？

标签： reactjs react-router

【解决方案1】：

查看documentation for BrowserRouter:

children: node 要渲染的单个子元素。

通过将一个节点作为 BrowserRouter 的子节点来修复它

import React, { Component } from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import Details from '../../pages/details/details';


class ViewButton extends Component {
    refreshPage() {
        window.location.reload();
    }

    render() {

        var link = 'details/' + this.props.id;
        return (
            <div>
                <BrowserRouter>
                  <div>
                    <button>
                        <Link to={link} onClick={this.refreshPage}>View Detail</Link>
                    </button>
                    <Route path={link} component={Details} />
                  </div>
                </BrowserRouter>
            </div>
        );
    }
}
export default ViewButton;

【讨论】：