Uncaught TypeError: match is undefined leads to blank page

Question

我目前正在做一个回购查找器，我在让程序显示回购名称时遇到了问题

主页是这样的

import {FaGithub, FaPlus, FaSpinner, FaBars, FaTrash} from 'react-icons/fa'
import {Container, Form, SubmitButton, List, DeleteButton} from './styles'
import {Link} from 'react-router-dom'
import api from '../../services/api'

export default function Main(){

    const[newRepo, setNewRepo] = useState('')
    const[repos, setRepos] = useState([])
    const[loading, setLoading] = useState(false)
    const [alert, setAlert] = useState(null)

    useEffect(()=> {
        const repoStorage = localStorage.getItem('repos')
        if(repoStorage){
            setRepos(JSON.parse(repoStorage))
        }
    }, [])

    useEffect(()=> {
        localStorage.setItem('repos', JSON.stringify(repos))
    }, [repos])

    const handleSubmit = useCallback((e)=>{

        e.preventDefault()

        async function submit(){
            setLoading(true)
            setAlert(null)
            try{

                if(newRepo === ""){
                    throw new Error("Repo must not be blank")
                }
                const res = await api.get(`repos/${newRepo}`)
                const hasRepo = repos.find(repo => repo.name === newRepo)

                if(hasRepo) {
                    throw new Error("This repo already exists")
                }
                const data = {
                    name: res.data.full_name,
                }
                setRepos([...repos, data])
                setNewRepo('')
            }
            catch(err){
                setAlert(true)
                console.log(err)
            }
            finally{
                setLoading(false)
            }
        } 
        submit()   
    }, [newRepo, repos])

    function handleInputChange(e){
        setNewRepo(e.target.value)
        setAlert(null)
    }

    const handleDelete = useCallback((repo) => {
        const find = repos.filter(r => r.name !== repo)
        setRepos(find)
    }, [repos])

    return(
        <Container>
            <FaGithub size={25}/>
            <h1>My Repos</h1>

            <Form onSubmit={handleSubmit} error={alert}>
                <input type="text" 
                placeholder='Add repos'
                value={newRepo}
                onChange={handleInputChange}/>

                <SubmitButton loading={loading ? 1 : 0}>
                    {
                        loading ? (
                            <FaSpinner color= "#FFF" size={14}/>
                        ):(
                            <FaPlus color="#FFF" size={14}/>
                        )
                    }           
                </SubmitButton>
            </Form>

            <List>
                {repos.map(repo=> (
                    <li key={repo.name}>
                        <DeleteButton onClick={()=> handleDelete(repo.name)}>
                            <FaTrash size={14}/>
                        </DeleteButton>
                        <span>{repo.name}</span>                        
                            <Link to={`repo/${encodeURIComponent(repo.name)}`}>
                                <FaBars size={20}/>
                            </Link>
                    </li>
                ))}
            </List>
        </Container>
    )
}

用户将能够添加、删除它们或查看它们的详细信息。点击按钮查看详情会跳转至以下页面

import React from 'react'

export default function Repos({match}){
    return(
        <h1 style={{color:'#FFF'}}>
            Repos
            {decodeURIComponent(match.params.repo)}
        </h1>
    )
}

但是，当我检查控制台时，出现以下错误：未捕获类型错误：匹配未定义

遗漏或写错了什么？

航线代码

import React from 'react'
import {BrowserRouter, Routes, Route} from 'react-router-dom'
import Main from './pages/main'
import Repo from './repos'

export default function RouteManager(){
    return(
        <BrowserRouter>
            <Routes>
                <Route exact path="/" element ={<Main/>}/>
                <Route exact path="/repo/:repo" element ={<Repo/>}/>
            </Routes>
        </BrowserRouter>
    )
}

索引页

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

App.js代码

import React from 'react'
import RouteManager from './routes'
import GlobalStyle from './styles/global'
function App() {
  return (
    <>
      <GlobalStyle/>
      <RouteManager/>
    </>
    
  );
}

export default App;

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

Router-Dom 此代码使用的版本是 v6

Answer 1

找到问题。

基本上，我必须像这样传递参数：

import React from "react";
import {useParams} from 'react-router-dom'
export default function Repos(){
 
    let { repo } = useParams()
 
    return(
 
        <h1 style={{color: "#FFF"}}>
            {repo}
        </h1>
    )
}

Uncaught TypeError: match is undefined leads to blank page

Uncaught TypeError: match is undefined leads to blank page

javascript

frontend

reactjs