有没有一种方法可以在不使用props对象的情况下在组件之间传递属性？

我有一个显示咖啡馆列表的组件。在此组件（ CafeList.jsx）中，发出了axios请求，该请求返回了咖啡馆列表，该咖啡馆列表已映射并呈现到浏览器。
我希望用户能够单击咖啡馆，然后转到包含有关该咖啡馆的特定信息的页面（在此阶段为CafeReview.jsx）。

我需要将咖啡馆ID（_id）从CafeList传递到CafeReviews，以便可以在axios请求中使用它，以带回有关被点击的咖啡馆的特定数据。有什么建议？另外，我是否有正确的一般方法？

组件

CafeList.jsx

import React, {useState, useEffect} from 'react'
import axios from 'axios'
import {Link} from 'react-router-dom'


const CafeList = () => {
    const [cafes, setCafe] = useState([])

    useEffect(() => {
        axios.get('/api/all-cafes')
        .then(cafe => {
            setCafe(cafe.data)
        })
        .catch(err => {
            console.log(err)
        })
    },[])

    return(
            <div className = 'cafe-container-container'>
                <h2>Cafes</h2>
                {
                cafes.map(cafe =>{
                    const {cafeName,photoURL,_id} = cafe
                    
                    return (
                    <Link to = {`/cafe-reviews/${_id}`} style={{ textDecoration: 'none' }} >
                        <div className = 'cafe-container'>
                            <h2>{cafeName}</h2>
                            <img src = {photoURL}></img>
                        </div>
                    </Link>
                    )
                })
            }
            </div>

    )
}

export default CafeList

CafeReviews.jsx

import React,{useState, useEffect} from 'react'
import axios from 'axios'

const CafeReviews = () => {
  const [cafe,setCafe] = useState([])

  useEffect(() => {
    axios.get('/api/cafe/:id')
    .then(result => {
        setCafe(result.data)
    })
  },[])

  return(
      <div>
          {
             cafe.map(item => {
                 return (
                     <h2>{item.cafeName}</h2>
                 )
             }) 
          }
      </div>
  )
}

export default CafeReviews

路线和数据模型

通过ID获取咖啡馆：

app.get('/api/cafe/:id', (req,res) => {
    const id =req.params.id
    Cafe.findById(id)
    .then(result => {
        res.send(result)
    })
    .catch(err => {
        console.log(err)
    })
})

咖啡厅型号：

const mongoose = require('mongoose')
const Schema = mongoose.Schema

const cafeSchema = new Schema({
    cafeName:String,
    photoURL:String,
}, {timestamps:true})

const Cafe = mongoose.model('cafes', cafeSchema)

module.exports = Cafe

路由器：

import React from 'react'
import AddReview from './components/AddReview'
import Main from './components/Main'
import AllReviews from './components/AllReviews'
import CafeReviews from './components/CafeReviews'
import './styles.css'

import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'

const App = () => {
  return(
    <Router>
    <div>
      <Switch>
      <Route path ='/' exact component = {Main}/>
      <Route path ='/add-review' component = {AddReview}/>
      <Route path ='/all-reviews' component = {AllReviews}/>
      <Route path ='/cafe-reviews/:id' component = {CafeReviews}/>
      </Switch>
    </div>
    </Router>
  )
}

export default App;