Почему компонент Header неожиданно меняется после перехода на страницу моего профиля? - PullRequest
Новая
       24

Почему компонент Header неожиданно меняется после перехода на страницу моего профиля?

1 голос
/ 23 апреля 2020

В настоящее время я использую Next. js, React. js и Auth0 в моем веб-приложении.

У меня в настоящее время работает API Auth0: страница входа / регистрации работает при вызове API auth0, и кнопка выхода из системы работает (отображается только после входа в систему / регистрации).

Однако я иметь страницу профиля, которая появляется в заголовке после того, как пользователь входит в систему или регистрируется, что является моей единственной проблемой. Пользовательские данные, представленные как на целевой странице, так и на странице профиля, являются правильными и отображаются, как и ожидалось.

Вместо того, чтобы объяснять, что происходит с моим компонентом Header при переходе на страницу профиля, вот изображение моего заголовка. на главной странице до навигации:

Целевая страница

Затем, после перехода на страницу профиля, вот как выглядит мой компонент заголовка:

Страница профиля

Вот мой JS код для справки как для моего компонента заголовка, так и для страницы профиля:

Заголовок. js, компонент: 

import React, { Component } from 'react'
import Link from 'next/link'
import Container from 'react-bootstrap/Container'
import Nav from 'react-bootstrap/Nav'
import Navbar from 'react-bootstrap/Navbar'
import { useUser } from '../utils/user'
import css from './css_modules/NavBar.module.css'

export default function Header() {

  const { user, loading } = useUser()

    return (
      <Navbar className='NavBar' fixed='top' bg='light' variant='dark' style={{ border: '.3px  ridge #808080'}}>
        <Navbar.Brand href='/'>
          <Link href='/'>
            <img
              src='/SA-wo-name.png'
              width='39'
              height='39'
              className='d-inline-block align-top'
              alt='Synaptic Affect Logo'
              style={{
                marginLeft: '35px'
              }}
            />
          </Link>
        </Navbar.Brand>
        <Nav className='justify-content-end' style={{ width: '100%' }} user={user} loading={loading}>
          {!loading &&
            (user ? (
              <>
                <Nav.Link style={{ marginRight: '3%'}}>
                    <Link href='/profile'>Profile</Link>
                </Nav.Link>
                <Nav.Link style={{marginRight: '3%'}}>
                  <button>
                    <Link href='/api/logout'>Logout</Link>
                  </button>
                </Nav.Link>
              </>
            ) : (
              <>
                <Nav.Link style={{ marginRight: '3%'}}>
                  <button>
                    <Link href='/api/login'>Login or Sign Up</Link>
                  </button>
                </Nav.Link>
              </>
            ))
          }
          </Nav>
      </Navbar>
    )
  }

Страница профиля: 

<code>import React, { Component } from 'react'
import Head from 'next/head'
import Link from 'next/link'
import Layout from '../components/Layout'
import Typeform from '../components/Typeform'
import Container from 'react-bootstrap/Container'
import Card from 'react-bootstrap/Card'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import { useFetchUser } from '../utils/user'
import image from '../assets/img/Climbing_Ladder.jpg'

export default function Profile() {
  const { user, loading } = useFetchUser()
  return (
    <main
      style={{
        backgroundImage: "url(" + image + ")",
        backgroundSize: "cover",
        backgroundPosition: "top center"
      }}
    >
      <Layout user={user} loading={loading}>
        <div
          style={{
            margin: 'center',
            // marginLeft: '-10%',
            // marginRight: '-10%',
            marginBottom: '200px',
            marginTop: '100px',
            marginRight: '8%',
            marginLeft: '8%',
            padding: '10px',
          }}
        >
        <h1>User Profile</h1>

        {loading && <p>Loading profile...</p>}

        {!loading && user && (
          <>
            <p>Profile:</p>
            <pre>{JSON.stringify(user, null, 2)}
)} {/ * Шаблон нижнего колонтитула

Некоторые вещи здесь →

Поиск подробной информации о функциях Next. js и API.

* /} )}

Есть идеи, почему это может происходить? Все остальное, кажется, работает как надо.

Я также сделал сообщение на форуме сообщества Auth0, но я думал, что буду на go вперед и покрою все свои базы

Действительно ценю любую и вся помощь или предложения!

...