There was such problem at work with API github. I can't get the data when going to the profile, but everything works when searching. I do not understand why

This error occurs

enter image description here

When trying to display user data, but when searching for such an error is not

enter image description here

when I go to the profile

enter image description here

code

import React from 'react'
import { Link, useParams } from 'react-router-dom';
import { useContext, useEffect, Fragment } from 'react';
import { GithubContext } from '../context/github/githubContex';

export const Profile = () => {

    const {getUser, getRepos, loading, user, repos} = useContext(GithubContext)
    const urlName = useParams()


    useEffect(() => {
        getUser(urlName)
        getRepos(urlName)

        console.log('Effect');
    },[])

    if (loading) {
        return <p className='text-center'>Загрузка...</p>
    }   

    const {
        name, company, avatar_url,
        location, bio, blog, 
        login, html_url, followers,
        following, public_repos, publick_gists

    } = user


    return(
        <Fragment>
            <Link to='/' className='btn btn-link'> На головну</Link>

            <div className='card mb-4'>
                <div className='card-body'>
                    <div className='row'>
                        <div className='col-sn-3 text-center'>
                            <img src={avatar_url} alt={name}></img>
                            <h1>{name}</h1>
                            {location && <p>Місце знаходженя: {location} </p>}
                        </div>
                        <div className='col'>
                            {
                                bio && <Fragment>
                                    <h3>BIO</h3>
                                    <p>{bio}</p>
                                </Fragment>
                            }
                            <a 
                                href={html_url}
                                target="_blank"
                                rel="noopener noreferrer" 
                                className='btn btn-dark'
                            >Відкрити профіль</a>
                            <ul>
                                {login && <li>
                                    <strong>Username: </strong> {login}
                                </li> }

                                {company && <li>
                                    <strong>Компания: </strong> {login}
                                </li> }


                                {blog && <li>
                                    <strong>Website: </strong> {login}
                                </li> }
                                
                                <div className='badge badge-primary'>
                                    Підписники: {followers}
                                </div>

                                <div className='badge badge-success'>
                                    Підписаний: {following}
                                </div>

                                <div className='badge badge-info'>
                                    Репозиторій: {public_repos}
                                </div>

                                <div className='badge badge-dark'>
                                    Gists: {publick_gists}
                                </div>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </Fragment>
    )


}

import React, {useReducer} from "react"
import axios from 'axios'
import { CLEAR_USERS, GET_REPOS, GET_USER, SEARCH_USERS, SET_LOADING } from "../types"
import { GithubContext } from "./githubContex"
import { githubReducer } from "./githubReducer"

const CLIENT_ID = process.env.REACT_APP_CLIENT_ID
const CLIENT_SECRET = process.env.REACT_APP_CLIENT_SECRET 

const withCreads = url => {
    return `${url}client_id=${CLIENT_ID}&client_secret=${CLIENT_SECRET}`
}

// console.log(CLIENT_ID, 'asd', CLIENT_SECRET)

export const GithubState = ({children}) => {
    const initialState = {
        user: {},
        users: [],
        loading: false,
        repos: []
    }
    const [state, dispatch] = useReducer(githubReducer, initialState)

    const search = async value => {
        setLoading()

        const response = await axios.get(
           withCreads(`https://api.github.com/search/users?q=${value}&`)
        )

        dispatch({
            type: SEARCH_USERS,
            payload: response.data.items
        })
    }

    const getUser = async name => {
        setLoading()

        const response = await axios.get(
            withCreads(`https://api.github.com/users/${name}?`)
        )

        console.log('name', name)

        dispatch({
            type: GET_USER,
            payload: response.data
        })
    }

    const getRepos = async name => {
        setLoading()

        const response = await axios.get(
            withCreads(`https://api.github.com/users/${name}/repos?per_page=5&`)
        )

        dispatch({
            type: GET_REPOS,
            payload: response.data
        })
    }

    const clearUsers = () => dispatch({type: CLEAR_USERS})
    
    const setLoading = () => dispatch({type: SET_LOADING})

    const {user, users, repos, loading} = state

    return (
        <GithubContext.Provider value={{
            setLoading, search, getUser, getRepos, clearUsers,
            user, users, repos, loading
        }}>
            {children}
        </GithubContext.Provider>
    )
}

CodePudding user response：

You are passing an object to getUser instead of string, so You should get urlName as a property of useParams.

const { urlName } = useParams()

You also need to pass key/value properties to children of the route component as bellow:

// set param with unique name to route's path
<Route path="/user/:urlName" />

// access the 'key/value' params after transition to the route component inside it's children
const {urlName} = useParams()

In this way, if you want to have dynamic route paths you can set your :urlName with any value to your Link components like:

const userName = "Johb"
<Link to={`/user/${userName}`}