我尝试布置匹配以从 url 接收名称，但我收到匹配 undefinde

Question

我遇到了这样的错误匹配未定义。我正在上一门关于 React 的旧课程，按照课程中的说明做了所有事情，但我得到了一个错误原因。我不明白为什么要匹配 undefinde。也许您需要以其他方式拿起比赛或以某种方式通过比赛？？

import React from "react";
import { BrowserRouter, Route, Routes } from 'react-router-dom'
import { NavBar } from "./components/NavBar";
import { Home } from './pages/Home'
import { About } from './pages/About'
import { Profile } from './pages/Profile'
import { Alert } from "./components/Alert";
import { AlertState } from "./context/alert/AlertState";
import { GithubState } from "./context/github/GithunState";

function App() {
  return (
    <GithubState>
      <AlertState>
        <BrowserRouter>
          <NavBar />
          <div className="container pt-4">
            <Alert alert={{text: 'Test Alert'}} />
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="/about" element={<About />} />
              <Route path="/profile/:name" element={<Profile />} />
            </Routes>
          </div>
        </BrowserRouter>
      </AlertState>
    </GithubState>
  );
}

export default App;

import React from 'react'
import { useContext, useEffect } from 'react';
import { GithubContext } from '../context/github/githubContex';

export const Profile = ({match}) => {

    // const github = useContext(GithubContext)
    // const name = match.params.name

    // useEffect(() => {
    //     github.getUser()
    //     github.getRepos(name)
    // }, [])



    console.log('asd',match);
    return(
        <div>
            <h1>Profile page</h1>
        </div>
    )
}

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

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/users/${name}?`)
        )

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

    const getRepos = async name => {
        setLoading()

        const response = await axios.get(
            withCreads(`https://api.github.com/users/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>
    )
}

链接到 Github https://github.com/Eater228/React-Hooks

Answer 1

检查您的package.json 文件，如果您使用的是旧版本的react-router-dom，请使用最新版本。

match 属性应该从Route 组件传递下来，它会在您使用react-router-dom 时反映正确的数据。

更新

您正在使用 element 属性来渲染组件，这不是正确的。您应该将 element 替换为 component，它会起作用。

更新

请考虑使用 useParams 钩子而不是 match 道具。 https://reactrouter.com/docs/en/v6/getting-started/overview#reading-url-parameters