Маршрутизатор ReactJs дублирует себя при переносе в компонент

Question

Я новичок в реакции, я использую React 4, Redux и пакетact-router-dom для своего маршрутизатора.

У меня есть файл App.js, который соединяет Main с mapStateToProps & 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

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

);}}

Я создал файл 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) к родительскому (главный компонент), и в конце концов он отображает дочерний.

Когда я преобразую строкудочерний компонент props показывает только историю, местоположение и другие параметры маршрута, но он не отображает мои параметры Users, которые являются стандартным состоянием приложения!

И когда я использую инструменты реагирования разработчика, он показывает, что есть другиемаршрутизатор внутри моего маршрутизатора!

Дублированный снимок экрана маршрутизатора

Я обнаружил, что когда я помещаю маршрутизатор во что-то (компонент, элемент или что-то подобное), он создает внутри другой маршрутизаторсам и дочерний маршрутизатор не имеют родительского реквизита.

Я также пытался добавить

{...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, вам необходимо по-другому реструктурировать свои маршруты, поскольку при текущем способе реквизиты передаются в маршрутизатор, но маршрутизатор не передает их в компонент Route

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