Реагирует URL-адрес Browserrouter, но страница / компоненты отображаются только при обновлении

Question

Здравствуйте, я создал приложение для взаимодействия с удаленным компонентом меню.Я перепробовал много разных способов, и мои URL-адреса менялись, но не мои компоненты отображались на моем экране.Вот код https://github.com/DortasDimitrios/danai-delimeats, пожалуйста, помогите

Answer 1

попробуйте заменить index.js и app.js приведенным ниже кодом.Надеюсь, проблема в следующем:

Убедитесь, что вы завернули основной код рендеринга реакции в маршрутизаторе.Например, с Reaction-DOM вам нужно обернуть приложение в Browser-Route

// index.js

import {
  BrowserRouter
} from 'react-router-dom'
ReactDOM.render( < BrowserRouter > < App / > < /BrowserRouter>, document.getElementById('root'));


// app.js

<Switch>
        <Route path="/" exact render={props => <Homepage {...props} />} />
        <Route
          path="/about-us"
          exact
          render={props => <WhoWeAre {...props} />}
        />
</Switch>

Answer 2

Вы запускаете новый BrowserRouter в вашем меню, которое будет внедрять новую историю и местоположение в базовые компоненты.Вы должны получить доступ к уже созданному объекту истории и изменить местоположение на нем.Вы можете сделать это с помощью элемента <Route>.Пример:

<Route render={({history, location}) =>
    <Menu
        theme="dark"
        mode="inline"
        defaultSelectedKeys={[location.pathname]}
        onClick={this.clickAction(history)}
    >
        <Menu.Item key="/">
            <Icon type="home"/>
            <span>
                <FormattedMessage
                    id="main_layout.menu.home"
                    defaultMessage="Home"
                />
            </span>
        </Menu.Item>
        <Menu.Item key="/user">
            <Icon type="user"/>
            <span>
                <FormattedMessage
                    id="main_layout.menu.users"
                    defaultMessage="Users"
                />
            </span>
        </Menu.Item>
    </Menu>
}/>
[...]


private clickAction(history) {
    return (param) => {
        history.push(param.key);
    };
}

Обратный вызов рендеринга в <Route> получает объект местоположения и истории, где вы можете теперь переместить ваше новое местоположение в.

Создан фиксированный вариант: https://github.com/SidiaDevelopment/danai-delimeats