Как отобразить конкретную статью, используя useParams? - PullRequest
Новая
       14

Как отобразить конкретную статью, используя useParams?

0 голосов
/ 06 марта 2020

Я создаю простой блог, используя React Hooks. Для роутера я использую useParams (). Все статьи блога находятся на верхней странице, и если вы нажмете на заголовок, вы попадете на одну страницу статьи.

Я мог бы отобразить идентификатор статьи, на которую щелкнули, написав const {id} = useParams(); console.log(id); на компоненте Page. Но как отобразить заголовок и текст на одной странице статьи? Я пробовал метод .find, но он не работает. 

The data of blog posts

[
  {
    "id": "1oQAPxRl2k7Spev10qFE",
    "text": "Looooorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostr.",
    "title": "Title#1"
  },
  {
    "id": "ThRwQIgpLUB7iBq1H8VI",
    "text": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.",
    "title": "Title#2"
  },
  {
    "id": "aJvajhmoCXbfU7RJVkzn",
    "text": "Nuncccc sit amet ante convallis, semper metus ut, ornare leo. Fusce tellus metus, commodo at massa non, auctor pharetra ipsum. Maecenas in suscipit nulla. Nam in consectetur dui, non laoreet purus. Aliquam erat volutpat. Etiam non risus vestibulum, ornare mauris ut, pretium mauris. Nam ac rutrum odio. Vestibulum feugiat scelerisque elementum. Sed condimentum risus nec sem sodales porta. Proin mollis suscipit neque, facilisis luctus nisi feugiat nec. Duis efficitur orci vel ullamcorper rhoncus. Fusce ante ipsum, facilisis non purus nec, aliquam fringilla nibh. ",
    "title": "Title#3"
  },
  {
    "id": "pFFNhyrv3aJJg8Cq18Fx",
    "text": "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    "title": "Title#4"
  }
]


import React, { useState, useEffect } from 'react';
import Header from './Header';
import Page from '../pages/Page'
import { db } from "../Firebase";
import {
    BrowserRouter as Router,
    Route,
    Switch
} from 'react-router-dom';

const App = () => {

    const [articles, setArticles] = useState([]);

    useEffect(() => {

        const unsubscribe = db
            .collection('articles')
            .onSnapshot((snapshot) => {
                const newArticles = snapshot.docs.map((doc) => ({
                    id: doc.id,
                    ...doc.data()
          }))
          setArticles(newArticles)
        })

          return () => unsubscribe()
    }, []);

    return (
        <div>
            <Router> 
                <Header />
                <Switch>
                    <Route exact path="/" render={() => <Home articles={articles} />} />
                    <Route exact path="/page/:id/" render={() => <Page articles={articles} />} />
                </Switch>
            </Router>     
        </div>
    );
}

export default App;

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

function Header(props) {

  return (
    <div>       
      <h1>Title</h1>
            <ul>
              <li><Link to='/' >Home</Link></li>
            </ul>          
    </div>
  );
}

export default Header;

import React from 'react';
import { useParams } from 'react-router';

function Page(props) {

    return (
      <div>
        *** Title of clicked article ***
        *** Text of clicked article ***
      </div>
    );
  }

  export default Page;
...