ReactJs Router将其包装在组件中时自行复制-Java 学习之路

我是初学者，我正在为我的路由器使用React 4，Redux和react-router-dom包 .

我有一个App.js文件，它连接Main与mapStateToProps和mapDispatchToProps

//App.js
const App = connect(mapStateToProps, mapDispatchToProps)(Main);

我的主要组件呈现 Headers 和克隆子元素

//Main.js
export default class Main extends React.Component {
    render() {
        return (
            <div>
                <h1>Hi I'm Header</h1>
                {React.cloneElement(this.props.children, this.props)}
            </div>
        );
    }
}

我的子组件包含一个简单的Json stringify of props

//UserList.js
export default class UsersList extends React.Component {
    render(){
        return (
            <pre>
                {JSON.stringify(this.props, null, "")}
            </pre>
        );
    }
}

我做了一个index.js文件，它有一个路由并包含提供者，提供者子节点是路由器，我的路由器包含其他应用程序路由

//index.js
const router = (
    <Provider store={store}>
        <App>
            <Router history={history}>
                <Switch>
                    <Route exact path="/" component={UsersList}/>
                </Switch>
            </Router>
        </App>
    </Provider>
);
render(router, document.getElementById('root'));

如您所见，我有一个应用程序，我的应用程序将main连接到mapstatetoprops和mapdispatchtoprops，最后将子路径（UsersList组件）提供给父（主要组件），最后它呈现子项 .

当我对子组件道具进行字符串化时，它只显示路径的历史，位置和其他道具，但它没有显示我的用户道具这是应用程序的默认状态！

当我使用反应开发工具时，它显示我的路由器内有其他路由器！

Duplicated Router Screenshot

我发现当我把路由器放入某个东西（组件，元素或其他类似的东西）时，它会在其自身内部创建另一个路由器，并且子路由器没有父道具 .

我也尝试添加

{...this.props}

路线或

render={(props) => <UserList {props} />}

我试过的另一种方法是使用嵌套路线

const router = (
    <Provider store={store}>
        <Router history={history}>
            <Route path="/" component={App}>
                <Route exact component={UsersList}/>
                <Route path="/single/:id" component={SingleUser}/>
            </Route>
        </Router>
    </Provider>
);

但结果是这个错误：

React.cloneElement(...): The argument must be a React element, but you passed undefined.

谢谢 .

1 回答

由于你想将道具从App组件传递给UsersList，你需要以不同的方式重构你的路由，因为使用当前的方式，道具传递给路由器，但路由器不会将它们传递给路由组件

index.js

const router = (
    <Provider store={store}>
        <Router history={history}>
             <Route component={App} />
        </Router>
    </Provider>
);
render(router, document.getElementById('root'));

Main.js

export default class Main extends React.Component {
    render() {
        return (
            <div>
                <h1>Hi I'm Header</h1>
                <Switch>
                    <Route exact path="/" render={(routerProps) => <UsersList {...this.props} {...routerProps}/>}/>
                </Switch>
            </div>
        );
    }
}

回复于 2024-05-04T23:47:53+08:00

ReactJs Router将其包装在组件中时自行复制

1 回答

相关问题