未捕获(承诺中)错误:请求在转到配置文件时失败，状态代码为404

Question

API github工作时出现了这样的问题。我无法在进入配置文件时获取数据，但在搜索时一切正常。我不明白为什么

发生此错误

在此处输入图像描述

当试图显示用户数据时，但当搜索这样的错误时不是

在此处输入图像描述

当我转到配置文件时

在此处输入图像描述

代码

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>
)
}

Answer 1

您将对象传递给getUser而不是string，因此您应该将urlName作为useParams的属性。

const { urlName } = useParams()

您还需要将key/value属性传递给路由组件的子级，如下所示：

// 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()

通过这种方式，如果你想拥有动态路由路径，你可以将:urlName设置为Link组件的任何值，比如：

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