Вы не должны использовать <Link>вне ошибки <Router>после использования <Link>в компоненте, отображаемом ReactDOM.render ()

Question

Итак, у меня есть меню, которое отображается сразу после нажатия какого-либо другого компонента: ReactDOM.render() В этом меню есть компонент, вызывающий проблему в заголовке.

const ProfileMenu = props => {
    return(
        <div>
            <div className={`arrow-thing ${props.addClass1}`}></div>
            <div className={`profile-menu ${props.addClass2}`}>
                <div className="profile-menu-container">
                    <Link to="/profile"><div className={`profile-menu-button ${props.addClass3}`}>Profile</div></Link>
                    <Link to="/settings"><div className={`profile-menu-button ${props.addClass3}`}>Settings</div></Link>
                    <div className={`profile-menu-button ${props.addClass3}`}>Logout</div>
                </div>
            </div>
        </div>
    )
}

У меня есть попытался создать еще один элемент <BrowserRouter> вокруг элемента <Link>, но путь изменился, но ничего не произошло. Как я могу использовать мои маршруты в главном файле приложения. js для этого визуализированного компонента? Изменить: Конечно, есть класс c Маршрутизатор и иерархия тегов маршрутизации в основном приложении. js и в каждом случае маршрутизации, кроме этого, все работает как обычно

Answer 1

вы можете обернуть BrowserRouter в самом приложении для этой ошибки на go прочь

const AppWithRouter =() => (<BrowserRouter>
                                <App/>
                            </BrowserRouter>);
ReactDOM.render(<AppWithRouter/>, document.getElementById('root'));

, так как иногда вы не всегда можете быть в компоненте Route, Switch et c для получения истории или Link, вы можете использовать withRouter, чтобы обернуть компонент.

import { withRouter } from "react-router-dom";

const ProfileMenu = props => {
    return(
        <div>
            <div className={`arrow-thing ${props.addClass1}`}></div>
            <div className={`profile-menu ${props.addClass2}`}>
                <div className="profile-menu-container">
                    <Link to="/profile"><div className={`profile-menu-button ${props.addClass3}`}>Profile</div></Link>
                    <Link to="/settings"><div className={`profile-menu-button ${props.addClass3}`}>Settings</div></Link>
                    <div className={`profile-menu-button ${props.addClass3}`}>Logout</div>
                </div>
            </div>
        </div>
    )
}

export withRouter(ProfileMenu);

Answer 2

Обычно ваш маршрутизатор находится достаточно высоко в дереве, желательно на самом верху.

Таким образом, все ваше приложение находится внутри <Router />, и, следовательно, вы сможете получить доступ к * 1004. * и <Route /> компоненты в любом месте.

То, как я лично это делаю, - это <App /> компонент рендеринга <Router />, тогда вся моя страница переходит в тег <Router />. Тогда вы можете использовать <Link />, где вы хотите