Блог

У меня есть вызов API, и я отображаю все элементы. Теперь я хочу отобразить больше информации для любого элемента, кликов пользователя, через React-Router. На данный момент после нажатия на ссылку он перенаправляет на связанный компонент, но домашняя страница не исчезает. Как это скрыть? Любая помощь будет оценена.
Вот мои компоненты маршрутов, которые импортируются в App.js

 import React from 'react'
import { Switch, Route } from 'react-router-dom'
import CountryCard from './CountryCard'
import TableRow from './components/TableRow'

const Routes = () => (
  <Switch>
    <Route exact path="/TableRow" component={TableRow} />
    <Route path="/TableRow/:id" component={CountryCard} />
  </Switch>
)
export default Routes

  

в компоненте MainTable я сопоставляю выбранные данные

 
import React, { useContext, useEffect } from 'react'
import Header from '../Header'
import TableRow from '../TableRow'
import ThemeContext from '../../useContext/context'

import './mainTable.scss'

export default function MainTable({ countries }: any) {
  const { theme } = useContext(ThemeContext)

  useEffect(() => {
    const body = document.getElementsByTagName('body')
    body[0].style.backgroundColor = theme.foreground
  }, [theme.foreground])

  return (
    <div>
      <Header />

      <table className="table">
        <tbody className="tableBody">
          {countries amp;amp;
            countries.map((country?: any) => (
              <TableRow
                key={country.name}
                flagUrl={country.flag}
                countryName={country.name}
                languages={country.languages}
                population={country.population}
                region={country.region}
              />
            ))}
        </tbody>
      </table>
    </div>
  )
}



  

в компоненте TableRow я отображаю элементы и создаю ссылку для имени элемента

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

import Flag from '../Flag'

import { TableRowProps } from '../../types'
import ThemeContext from '../../useContext/context'

import './tableRow.scss'

export default function TableRow({
  flagUrl,
  countryName,
  languages,
  population,
  region,
}: TableRowProps) {
  const { theme } = useContext(ThemeContext)

  return (
    <tr className="tableRow">
      <td>
        <Flag flag={flagUrl} />
      </td>
      <td>
        {
          <Link
            to={`/index/${countryName}`}
            style={{ color: 'inherit', textDecoration: 'inherit' }}
          >
            {countryName}
          </Link>
        }
      </td>
      <td>
        {languages amp;amp;
          languages.map((lang: any) => <li key={lang.name}>{lang.name}</li>)}
      </td>
      <td>{population}</td>
      <td>{region}</td>
      <td>
        <button className="AddButton" style={{ color: theme.foreground }}>
          ADD
        </button>
      </td>
    </tr>
  )
}


  

Компонент CountryCard

 import React from 'react'

export default function CountryCard() {
  return (
    <div>
      <h1>hello</h1>
    </div>
  )
}
  

Измените свой маршрут.

 <Link
   to={`/TableRow/${countryName}`}
   style={{ color: 'inherit', textDecoration: 'inherit' }}>
   {countryName}
</Link>
  

URL-адрес должен совпадать с созданными маршрутами — (путь к) должен совпадать.

Вы смотрите что-то вроде этого примера вложенной маршрутизации. Вы можете понимать и изменять в соответствии с вашими требованиями.