reactjs - 由顶级 BrowserRouter 调用的组件内部的 BrowserRouter 与 NavLinks 不同步

Question

当用户使用<Header>NavLinks 或浏览器按钮进行导航时，<Progression>组件的 BrowserRouter 子级会忽略更改。

也就是说，如果用户已经加载了<Progression>组件，并单击 /progression NavLink 返回到<Progression>的入口点，则不会发生任何事情，因为匹配发生在顶级 BrowserRouter 上。

我已经尝试将<Header>组件移动到<Progression>组件的路由器中，这很好地修复了它，直到用户尝试在组件之外导航，即远离<Progression>组件，因为它的 BrowserRouter 没有任何其他页面的路由，不像它的顶级父级.

我是否正确使用 BrowserRouter，还是有更好、更简单的方法来实现这一目标？

我如何解决它？

谢谢！

标签： reactjsreact-router

Answer 1

尝试添加异步组件：

//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} />