Question

我正在学习 React，这个项目涉及 React Router。我已经阅读了许多教程，但无法让它们为我的项目工作

基本上，问题在于我的 React 路由在 URL 更改和页面更改的情况下起作用，但除非重新加载，否则它会更改为空白 index.html，它可以正常工作。

我的 App.js 在创建 accessToken 时呈现 <Profile />：

  return (
    <BrowserRouter>
      <AppContainer>
        <GlobalStyle />
          <Switch>
            <Route exact path ='/' component={withRouter(accessToken ? Profile : Login)} />
            <Route exact path ='/playlist' component={withRouter(Playlist)} />
          </Switch>
      </AppContainer>
    </BrowserRouter>
  );

并且 <Profile /> 具有指向 <Playlist /> 的链接：

    return (
        <Wrapper>
            <Banner user={user} />
            <Link to='/playlist'>Find New Music</Link>
            <Favorites history={history} />
        </Wrapper>
    );

现在只是一个模板：

const Playlist = () => {
    return <h1>Hello</h1>
}

工作正常，并重定向到 localhost:3000/playlist，但该路由显示白屏。刷新后，<h1>Hello</h1> 会正确显示。有没有人知道为什么会发生这种情况？

Answer 1

发现错误。

df['Column list3'] = List3

中断路由。这是一个隐藏在 Profile.jsx 组件中的针对不同问题的快速修复，我将不得不寻找更好的方法。

React Router 显示空白页面直到刷新

1 个答案: