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

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

У меня есть файл App.js, который соединяет Main с mapStateToProps и mapDispatchToProps

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

Компонент My 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 для свойств.

//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) к родительскому (Main Component) и, в конце концов, отображает дочерний.

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

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

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

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

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

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

Спасибо.


reactjs react-redux react-router-dom react-router-v4
person Reza Erami    schedule 12.06.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Поскольку вы хотите передать реквизиты из компонента приложения в 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>
        );
    }
}
person Shubham Khatri    schedule 12.06.2018
comment
спасибо, приятель, я внес изменения и решил дубликат маршрута, но главное не передает реквизиты, мой основной имеет опору Users, но вложенный переключатель, маршрут и обработанный UserList нет. Я также добавляю {... this.props} в маршруты main и index, но ничего не произошло - person Reza Erami; 12.06.2018
comment
Имеет ли основной компонент желаемые реквизиты, если да, то рендеринг как <Route exact path="/" render={(routerProps) => <UsersList {...this.props} {...routerProps}/>}/> даст вам желаемый результат. Я только что обновил ответ, чтобы использовать синтаксис распространения, который я забыл в своем исходном сообщении. - person Shubham Khatri; 12.06.2018
comment
черт возьми, это сработало ... большое спасибо, дружище, но почему это происходит? - person Reza Erami; 12.06.2018
comment
Нам нужно передать его компоненту USerList, отметьте это stackoverflow.com/questions/44255415/ - person Shubham Khatri; 12.06.2018