React Router показывает пустую страницу при использовании <Link>

Question

После обновления кучи наших зависимостей мы теперь вынуждены использовать теги привязки, которые вызывают перенаправления, раньше мы использовали, но теперь каждый раз, когда мы нажимаем на, он переходит на правильный url ie / screen, но это просто пустая страница и никогда не представляет компоненты, ниже находится наш родительский файл index.tsx:

ReactDOM.render(
  <Provider {...stores}>
    {/* Changed routes to children */}
    {/* <Router children={routes} history={createHistory} /> */}
    <Router history={createHistory}>
      <div>
        <Switch>
          <Route path='/oauth2callback' componentDidMount={console.log()}>
            {() => {
              if(window.location.href.includes('/oauth2callback'))
              {
                oauth2callback(window.location.hash)
              }
            }}
          </Route>
          <Route path='/testing' component={Get} />
          <Route path='/'>
            {/* Function that determines if the user is logged in and can allow the authenticated passage or not. If no, it will not render authenticated pages*/}
            {() => {
              if(auth.loggedIn())
              {
                console.log("is logged in")
                return(
                  <div>
                    <Route component={App} history={createHistory}/>
                    <div className="row" id="wrapper">
                      <Switch>
                        {/* <Route path='/screens' component={Screens}/> */}
                        <Route path='/screens' component={Screens}/>
                        <Route path='/playlists' component={Playlists}/>
                        <Route path='/content' component={Content}/>
                        <Route path='/help' component={HelpNav}/>
                        <Route component={NotFound}/>
                      </Switch>
                    </div>
                  </div>
                )
              }
              else 
              {
                console.log("is not logged in")
                return(
                  <Route path='/' component={HomeNav}/>
                )
              }
            }}
          </Route>
          <Route path='401' component={Get} />
        </Switch>
      </div>
    </Router>
  </Provider>,

, а вот app.tsx с панелью навигации:

 <Nav className="mb-nav">
                {/* <IndexLinkContainer to="/screens"> */}
                  <Nav.Item style={{width: widthConstants[0]}}>
                    <Link to='/screens' style={{color: this.state.navIndex === 0 ? "white" : "bbddba"}}>
                      Screens
                    </Link>
                  </Nav.Item>
                {/* </IndexLinkContainer> */}
                {/* <LinkContainer to="/playlists"> */}
                  <Nav.Item style={{width: widthConstants[1]}}>
                    <a href="/playlists" style={{color: this.state.navIndex === 1 ? "white" : "bbddba"}}>
                      Playlists
                    </a>
                    </Nav.Item>
                {/* </LinkContainer> */}
                {/* <LinkContainer to="/content"> */}
                  <Nav.Item style={{width: widthConstants[2]}}>
                    <a href="/content" style={{color: this.state.navIndex === 2 ? "white" : "bbddba"}}>
                      Content
                    </a>
                  </Nav.Item>
                {/* </LinkContainer> */}
                {/* <LinkContainer to="/help"> */}
                  <Nav.Item style={{width: widthConstants[3]}}>
                    <a href="/help" style={{color: this.state.navIndex === 3 ? "white" : "bbddba"}}>
                      Help
                    </a>
                  </Nav.Item>
                {/* </LinkContainer> */}
                {this.shouldRenderTouch && <TouchButton/>}
              </Nav>
            </Navbar.Collapse>
          </div>
        </Navbar>

любая идея, что отличается в новое обновление реагирующего маршрутизатора, чтобы вызвать эту ошибку?

Answer 1

Исправление было намного проще, чем я думал, новое обновление интегрировало BrowserRouter вместо Router, поэтому я заменил

<Router history={createHistory}>

на

<BrowserRouter>

, и теперь все работает как надо. должен

Answer 2

Прочтите «Маршруты и ссылки относительно их родителя» в этой статье о React Router 6. https://medium.com/frontend-digest/whats-new-in-react-router-6-732b06cc83e4

кстати, странно, что у вас есть теги <a> вместо Link компоненты иногда