Блог

Я создаю веб-сайт, и я хочу, чтобы пользователи были перенаправлены на определенную страницу, когда они открывают сайт. Страница, на которую они будут перенаправлены, зависит от того, вошли ли они уже в систему. Моя проблема в том, что маршрутизатор не работает (пользователь не перенаправляется ни на одну страницу), и все, что появляется, — это пустая страница. Я пытался избавиться от маршрутов, но, несмотря на это, я ничего не смог отобразить на индексной странице. Возможно, проблема даже не в маршрутизаторе, а в чем-то другом.

Я никогда не получаю никаких сообщений об ошибках. Вот те части кода, в которых, я думаю, может быть проблема.

_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
 

Я был бы признателен, если бы кто-нибудь указал на мои ошибки.

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 на этой странице. Несмотря на это, я предлагаю вам прекратить использование react router и начать использовать встроенную систему маршрутизации с next.js