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

Question

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

我有一个 App.js 文件，它将 Main 与 mapStateToProps & mapDispatchToProps 连接起来

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

我的主要组件呈现 header 并克隆 child 个元素

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

我的 child 组件包含一个简单的 Json 道具字符串化

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

我制作了一个 index.js 文件，其中有一个路由并包含提供程序，提供程序 child 是一个路由器，我的路由器包含其他应用程序路由

//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，最后将 child 路由（UsersList 组件）提供给 parent（主要组件）并在结束它呈现 child.

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

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

Duplicated Router Screenshot

我发现当我将路由器放入某些东西（组件、元素或类似的东西）时，它会在其内部创建另一个路由器，而 child 路由器没有 parent 属性。

我也试过添加

{...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.

谢谢。

Answer 1

由于你想将 props 从 App 组件传递到 UsersList，你需要以不同的方式重组你的路由，因为在当前的方式中，props 被传递到 Router，但 Router 不会将它们传递到路由组件

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

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

ReactJs Router Duplicates itself when wrap it in component

reactjs

react-redux

react-router-v4

react-router-dom