React 路由器导致空白索引页。下一个JS

Question

我正在创建一个网站，我希望用户在打开该网站时被定向到特定页面。他们将被引导到的页面取决于他们是否已经登录。我的问题是：路由器不工作（用户没有被重定向到任何页面）并且出现的所有内容都是空白页。我试图摆脱这些路线，但即使如此，我也无法在索引页面上显示任何内容。也许问题甚至不是路由器，而是其他问题。

我从来没有收到任何错误消息。以下是代码的一部分，我认为问题可能出在哪里。

_app.js：

import React from 'react'
import { BrowserRouter as Router, Route } from "react-router-dom"
import Novidades from './lancamento'
import SignUp from './signup'
import Croosa from './croosa'
import { AuthProvider } from '../utils/auth'
import PrivateRoute from '../utils/PrivateRoute'


const App = () => {
  return(
        <AuthProvider>
          <Router>
            <div>
              <PrivateRoute exact path='/lancamento' component={Lancamento} />
              <Route exact path='/croosa' component={Croosa}/>
              <Route exact path='/signup' component={SignUp} />
            </div>
          </Router>
        </AuthProvider>
  )
}

export default App

index.js：

import React from 'react'
import App from './_app'

export default function Home() {
      return(
        <App/>
      )
}

还有 PrivateRoute.js，它决定用户将被重定向到哪个页面：

import React, { useContext } from "react";
import { Route, Redirect } from "react-router-dom";
import { AuthContext } from "./auth";

const PrivateRoute = ({ component: RouteComponent, ...rest }) => {
  const {currentUser} = useContext(AuthContext);
  return (
    <Route
      {...rest}
      render={routeProps =>
        !!currentUser ? (
          <RouteComponent {...routeProps} />
        ) : (
          <Redirect to={"/signup"} />
        )
      }
    />
  )
}


export default PrivateRoute

如果有人能指出我的错误，我将不胜感激。

Answer 1

Next.js 使用基于文件系统的路由结构。

您对_app.js 文件的工作方式存在误解。它是负责渲染从其他页面导出的其他组件的父组件。

例如：如果我的_app.js 文件如下所示：

export default function App({ Component, pageProps }) {
    return (
        <div>
            <p>This was injected by _app.js</p>
            <Component {...pageProps} />
        <div>
    );
}

我的pages/index.js 文件如下所示：

export default function Hello(){
    return <h1>Hello World!</h1>
}

如果我访问localhost:3000/，那么使用该设置会呈现以下内容

<div>
    <p>This was injected by _app.js</p>
    <h1>Hello World!</h1>
</div>

您所做的是在您的 _app.js 中忽略了传递的 Component 属性，因此您访问的每个页面都将呈现相同的内容。那就是：

<AuthProvider>
  <Router>
    <div>
      <PrivateRoute exact path="/lancamento" component={Lancamento} />
      <Route exact path="/croosa" component={Croosa} />
      <Route exact path="/signup" component={SignUp} />
    </div>
  </Router>
</AuthProvider>

您的索引页面为空白的原因是因为您没有为/ 设置路由，因此该页面上的反应路由器不会呈现任何组件。无论如何我建议你停止使用 react 路由器并开始使用带有 next.js 的内置路由系统