BrowserRouter внутри компонента, вызываемого верхним уровнем BrowserRouter с NavLinks, не синхронизирован

Question

Когда пользователь перемещается с помощью <Header> NavLinks или кнопок браузера, дочерние элементы BrowserRouter компонента <Progression> игнорируют это изменение.

То есть, если пользователь загрузил компонент <Progression> и щелкнул NavLink / progression, чтобы вернуться к точке входа <Progression>, ничего не происходит, так как совпадение происходит на BrowserRouter верхнего уровня.

Я пытался переместить компонент <Header> в <Progression> Маршрутизатор компонента, и это исправляет это замечательно, пока пользователь не попытается перейти за пределы компонента, то есть от компонента <Progression>, так как его BrowserRouter не имеет любой из маршрутов для других страниц, в отличие от его родительского уровня.

Правильно ли я использую BrowserRouter или есть лучший, более простой способ добиться этого?

Как мне это исправить?

Спасибо!

Answer 1

Мне было задано, что я не должен использовать более одного BrowserRouter, поэтому я переместил столько маршрутов на верхний уровень, сколько смог. Первоначально я не делал этого в попытке сделать мой код более управляемым.

К сожалению, я все еще нуждаюсь и использую BrowserRouter в одном из моих компонентов, который прекрасно работает, за исключением одного <Link />, который связан с маршрутом верхнего уровня. Я еще не выяснил, что мне с этим делать, но если я это сделаю, я отредактирую и поделюсь с вами.

Answer 2

Попробуйте добавить asyncComponent:

//asyncComponent.js
import React, {Component} from 'react'

const asyncComponent = (importComponent) => {
    return class extends Component {
        state = {
            component: null
        }

        componentDidMount() {
            importComponent().then((cmp) => {
                this.setState({component: cmp.default})
            })
        }

        render() {
            const C = this.state.component
            return C ? <C {...this.props} /> : null
        }
    }
}

export default asyncComponent

//App.js

const asyncComp = asyncComponent(() => {
    return import('../containers/component/myComponent')
})

<Route path={'/path/:id'} component={asyncComp} />