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

Posted 2023-02-22

【中文标题】withRouter 参数解析 Invariant Violation 时出错：您不应在 <Router> 之外使用 <Route> 或 withRouter()

【英文标题】：Error in withRouter params parsing Invariant Violation: You should not use <Route> or withRouter() outside a <Router>

【发布时间】：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 声明的子组件（在任何级别）？

【参考方案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;