Question

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

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

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

我的主要组件呈现标题并克隆子元素

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

感谢。

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

ReactJs路由器将其包装在组件

1 个答案: