Откройте данные Specifi c, используя идентификатор в URL-адресе в React - PullRequest
Новая
       92

Откройте данные Specifi c, используя идентификатор в URL-адресе в React

1 голос
/ 12 июля 2020

Я пытаюсь открыть новую страницу, на которой отображаются более подробные данные, когда пользователь нажимает кнопку «Подробнее».

Это компонент, который отображается на домашней странице, и есть кнопка «Подробнее» когда пользователь нажимает на нее, открывается новая страница с более подробной информацией об этом компоненте. 

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

export default function Code(props) {

  const {desc, type, id } = props;
    return (
        <>
          <div className='box'>
            <h2 className='is-size-4'>{desc}</h2>
            <div className='detail'>
              <Link to={`code/${id}`} className='button btn'>
                <i className='fas fa-chevron-right'></i> &nbsp; Read More
              </Link>
              <div className='is-size-6 has-text-weight-medium tag'>Type: {type}</div>
            </div>
          </div>
        </>
    )
}

А это URL "http://localhost: 3000 / code / 1"

I добавили несколько статистических данных c только для пользовательского интерфейса 

<code>import React, { useContext } from 'react';
import Navbar1 from '../layouts/navbar1';
import { GlobalContext } from '../context/StateManager';

export default function CodeDetail() {
    const { deleteCode } = useContext(GlobalContext);

    return (
        <div>
            <Navbar1/>
            <div className='section'>
                <div className='container'>
                    <div className='box'>
                        <div className='title'>Grapes</div>
                        <pre>
                            font-family: Consolas,"courier new";
                            color: crimson;
                            background-color: #f1f1f1;
                            padding: 2px;
                            font-size: 105%;
Удалить Изменить )}

1 Ответ

0 голосов
/ 12 июля 2020

Вы захотите настроить свой маршрут аналогично приведенному ниже фрагменту 

<Switch>
      <Route path="/" exact component={Home} />
      <Route path="/code/:id"  component={CodeDetail} />
    </Switch>

Если вы хотите передать реквизиты компоненту, попробуйте использовать метод рендеринга 

<Route path="/code/:id" render={(props) => <CodeDetail {...props} data={someSliceOfState}} /> } />
...