javascript - React Router visar en tom sida när man använder <Link>

Efter att ha uppdaterat en massa av våra beroenden tvingas vi nu använda ankartaggar, vilket orsakar omdirigeringar. Tidigare använde vi , men nu varje gång vi klickar på en går det till rätt URL, t.ex. /screens, men det är bara en tom sida och komponenterna visas aldrig. Nedan är vår föräldrafil 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>,

och här är app.tsx med navigeringsfältet:

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

någon idé om vad som är annorlunda i den nya uppdateringen av React Router som orsakar att den här buggen finns?

Svar #1

Fixen var mycket enklare än jag trodde, den nya uppdateringen integrerade BrowserRouter istället för Router så jag ersatte

<Router history={createHistory}>

med

<BrowserRouter>

och allt fungerar nu som det ska

Svar #2

Läs "Routes and Links are relative to their parent" i denna React Router 6-artikel https://medium.com/frontend-digest/whats-new-in-react-router-6-732b06cc83e4

förresten är det konstigt att du ibland har <a>-taggar istället för Link-komponenter