Как правильно задать путь к файлу и компоненту?

Question

[ArturPetrov]

Хочу на странице HomePage.js cделать ссилку на страницу comment.js:

страница comment.js:

Но выдает ошибку что файл не найден:
Пробовал файл comment.js: положить в ту же папку в которой находиться HomePage.js тоесть в pages и прописать другой путь но также ошибка.
В чем причина?

Answer 1

[Антон Спирин]

В чем причина?

В том, что вы все делаете неправильно.

Вам надо использовать клиентский роутинг. Например, react-router-dom.
React Training / React Router

Comments

[ArturPetrov]

А без клиентского роутинга не получиться сделать ссылку на другую javascript страницу? Тоесть это физически невозможно?
Клиенсткий роутинг это так?:

<Route exact path="/Products" component={Products} />

[Антон Спирин]

ArturPetrov, в том-то и дело, что нет никаких JavaScript страниц. Ваш сервер отдает html с бандлом приложения по всем нестатическим маршрутам. Вам стоит разобраться с основами HTTP. Заодно можете почитать про Webpack и Webpack DevServer. create-react-app использует react-scripts, а react-scripts, в свою очередь, довольно сложную конфигурацию webpack и упомянутый выше Webpack DevServer.

Клиенсткий роутинг это так?

Да. Только пишите пути в нижнем регистре.

[ArturPetrov]

Антон Спирин, Cейчас переделываю на клиентский роутинг, все ок, ошибки нет, но если обычная ссылка

<a className="commant" href="какой-то путь">Коментарий</a>

отображалась на странице:

то:
при клиентсоком роутинге нет ссылки на на экране, тоесть слова "коментарий с с нижним подчеркиванием.
Что дописать в эту строку:

<Route exact path="./comment" component={Comment} />

чтобы ссылка для пользователя появилась?

[Антон Спирин]

ArturPetrov, во-первых уберите точку в path:

<Route exact path="/comment" component={Comment} />

во-вторых, роутер работает не с нативными ссылками, а с компонентом Link:
import { Link } from 'react-router-dom';

<Link to="/comment"> Коментарий </Link>

[ArturPetrov]

Если так как вы написали то ошибка:

код файла:

import React, {Component} from 'react';
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom';


class Homepage extends Component {
    render(){
        return (
            <Router>
          <div className="wrap-post">
        
            <div className="card">
            <h1>Чернівці</h1>
        <img className="image" src="https://risu.org.ua/php_uploads/images/articles/ArticleImages_61614_01.jpg" />
            
             
  <p class="price">Автор:Володимир Шевченко</p>
  <p>Чернівці дуже гарне місто</p>
  
            
  <Route exact path="./comment" component={Comment} />
            <Link to="/comment"> Коментарий <Link />
            
          </div>     
             <div className="card-two">
            <h1>Одеса</h1>
        <img className="image" src="https://1.bp.blogspot.com/-miFUuobe88w/WB9A503kbKI/AAAAAAAABRE/RFdF0iiWM9gKrWw7AwQ-o0LNMr3mWejPgCK4B/s1600/teschin-most1.jpg" />
            
             
  <p class="price">Автор:Сергій Петровський</p>
  <p>Одеса дуже гарне місто</p>
  
             <Route exact path="./comment" component={Comment} />
            <Link to="/comment"> Коментарий2 <Link />
     
            
          </div>     
            
          </div>   
            </Router>
        )
    }
}

export default Homepage;

[Антон Спирин]

ArturPetrov, опечатка же. Поправил. Вы то сами ведь знаете, как должен выглядеть закрывающий тэг. =)

[ArturPetrov]

Антон Спирин, сам сразу не заметил опечатку=)

[Антон Спирин]

ArturPetrov, стойте. Только внимательно посмотрел ваш код. И вижу, что и все неправильно спроектировано. А я немного не то вам посоветовал.
Вы хотите рендерить список постов с комментариями?

[ArturPetrov]

Антон Спирин,
да, я хочу рендерить список постов с комментариямия и хочу что б при нажатии на ссылку "коментарии" отображалось на странице то что содержится в файле comment.js, тоесть так как будто я перехожу на другую html страницу, но по факту что б она просто переренидивалась и были видны комментарии вместо постов.

и сейчас когда я нажимаю на ссылку "коментарии" у меня в адресной строке вроде как путь стал так как нужно но страница не изменилась, такая же как была когда ее отображал файл app.js

[Антон Спирин]

ArturPetrov, накидал сандбокс с примерным функционалом.
Там и условный ренденинг, и клиентский роутинг.

[ArturPetrov]

Антон Спирин, спасибо большое!