Блог

итак, у меня есть данные json в следующем формате. когда я пытаюсь получить доступ к категории с помощью параметров использования, это работает, но если я пытаюсь получить доступ к данным с помощью параметров использования, я получаю только «http» в консоли..как получить доступ к полному URL-адресу данных? .если я пытаюсь попасть в категорию , я получаю правильную информацию, но пытаюсь получить полный URL-адрес с помощью useParams, что дает мне данные: «http:», я пытаюсь получить доступ к полному URL-адресу, а не только к http

что мне нужно сделать ,так это получить меню категорий на домашней странице,а затем щелкнуть по определенной категории iv, чтобы получить данные определенной категории и перечислить их в новом компоненте.

 [
{
"category": "all",
"data": "http://allevents.s3.amazonaws.com/tests/all.json"
},
{
"category": "music",
"data": "http://allevents.s3.amazonaws.com/tests/music.json"
},
{
"category": "business",
"data": "http://allevents.s3.amazonaws.com/tests/business.json"
},
{
"category": "sports",
"data": "http://allevents.s3.amazonaws.com/tests/sports.json"
},
{
"category": "workshops",
"data": "http://allevents.s3.amazonaws.com/tests/workshops.json"
}
]
 

итак, ниже приведено мое приложение js

    import React,{useState,useEffect} from 'react';
import './App.css';
import { BrowserRouter as Router,Switch,Route } from 'react-router-dom';
import Menu from './components/Menu';
import Listing from './components/Listing';

function App() {
  const [isLoading,setISLoading] = useState(true);
  const[events,setEvents] = useState()

  const getEvents = async()=>{
    const response = await fetch('https://allevents.s3.amazonaws.com/tests/categories.json');
    const eventsData =await response.json()
    
    setEvents(eventsData);
    setISLoading(false);
  }
  useEffect(()=>getEvents(),[]);
  return (
    <Router>
      <Switch>
        <Route exact path ='/'>
           {isLoading?<h1>Loading...</h1>:<Menu events = {events}/>}
        </Route>
        <Route path = '/event/:data'>
          <Listing/>
        </Route>
   
      </Switch>
    </Router>


  );
}

export default App;
 

Menu.js компонент

 import React from 'react'
import { Link } from 'react-router-dom';


const Menu = ({events}) => {
    console.log(events);
    return (
        <div>
            {events.map((event)=>{
                return(  <div key={event.category}>
                    <Link to = {`/event/${event.data}`}><h3>{event.category.toUpperCase()}</h3></Link>
                    
                </div>)
            })}
        </div>
    )

   

    
}

export default Menu
 

и компонент листинга

 import React from 'react'
import {Link, useParams} from 'react-router-dom'

const Listing = ({match}) => {
    console.log(useParams())
   
    return (
        <div>
         hi
         
        </div>
    )
}

export default Listing
 

не получаю полную ссылку

Чтобы получить свой путь, Listing вы можете написать его так:

 const Listing = () => {
  const location = useLocation(); // import from "react-router-dom";
  console.log("location.pathname", location.pathname);

  return <div>hi</div>;
};