带有NavLinks的顶级BrowserRouter调用的组件内部的BrowserRouter不同步

Question

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

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

我曾尝试将<Header>组件移到<Progression>组件的Router中，这解决了它的奇妙，直到用户尝试导航到该组件之外，即远离<Progression>组件为止。与顶层父级不同，其BrowserRouter没有其他页面的任何路由。

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

我该如何解决？

谢谢！

Answer 1

尝试添加asyncComponent：

const mongoose = require('mongoose')
const dbConfig = require('../config').db

const dbconnect = (callback) => {
  let connString = `mongodb://${dbConfig.host}`
  if (dbConfig.username && dbConfig.password) {
    connString = `mongodb://${dbConfig.username}:${dbConfig.password}@${dbConfig.host}`
  }

  mongoose.connect(connString, { useNewUrlParser: true, useCreateIndex: true })

  mongoose.connection.on('open', function () {
    callback()
  })

  mongoose.connection.on('connected', function () {
    console.log('Mongoose default connection open to ' + connString)
  })

  mongoose.connection.on('error', function (err) {
    console.log('Mongoose default connection error: ' + err)
  })

  mongoose.connection.on('disconnected', function () {
    console.log('Mongoose default connection disconnected')
  })

  process.on('SIGINT', function () {
    mongoose.connection.close(function () {
      console.log('Mongoose default connection closed through app termination')
      process.exit(0)
    })
  })
}

module.exports = (callback) => {
  dbconnect(callback)
}

Answer 2

对我来说，我不应该使用多个BrowserRouter，所以我将尽可能多的路由移到了顶层。我最初并不是这样做，目的是使我的代码更易于管理。

不幸的是，我仍然需要在我的一个组件中使用并使用BrowserRouter，除了连接到顶层路由的一个<Link />之外，它的工作原理非常好。我还没有弄清楚我将如何处理它，但是如果这样做，我将进行编辑和共享。