React Router Issue: -URL изменяет, но не просматривает или не отображает компонент

Question

Я разработал приложение, которое работает хорошо, но иногда некоторые компоненты не отображаются при нажатии на ссылки.URL всегда меняется, но не виден .. так что, пожалуйста, помогите мне И расскажите о постоянном решении этой проблемы.Потому что я застрял с этим, это создает для меня больше проблем .. любезно помогите ..

import React, { Fragment } from "react";
import { useSelector } from "react-redux";
import { Link } from "react-router-dom";
import Moment from "react-moment";

const PostItems = ({
post: { _id, text, name, avatar, user, likes, comments, date }
}) => {
const auth = useSelector(state => state.auth);
return (
<Fragment>
  <div className='post bg-white p-1 my-1'>
    <div>
      <Link to='/profile'>
        <img className='round-img' src={avatar} alt='' />
        <h4>{name}</h4>
      </Link>
    </div>
    <div>
      <p className='my-1'>{text}</p>
      <p className='post-date'>
        <Moment format='YYYY-MM-DD'>{date}</Moment>
      </p>
      <button type='button' className='btn btn-light'>
        <i className='fas fa-thumbs-up'></i>
        <span>{likes.length > 0 && <span>{likes.length}</span>}</span>
      </button>
      <button type='button' className='btn btn-light'>
        <i className='fas fa-thumbs-down'></i>
      </button>
      <Link to='/post/${_id}' className='btn btn-primary'>
        Discussion{" "}
        <span className='comment-count'>
          {comments.length > 0 && <span>comments.length</span>}
        </span>
      </Link>
      {!auth.loading && user === auth.user._id && (
        <button type='button' className='btn btn-danger'>
          <i className='fas fa-times'></i>
        </button>
      )}
    </div>
    </div>
   </Fragment>
   );
  };
  export default PostItems;

RouteJs или приложение Это компонент приложения, куда импортируются все другие компоненты ..

  import { BrowserRouter as Router, Route, Switch } from "react-router 
  dom";
  import Navbar from "./components/layouts/Navbar";
  import Landing from "./components/layouts/Landing";
  import Posts from "./components/posts/Posts";



 <Router>
  <Navbar />
  <Route exact path='/' component={Landing} />
  <section className='container'>
    <Alert />
    <Switch>
      <Route exact path='/register' component={Register} />
      <Route exact path='/login' component={Login} />
      <Route exact path='/profiles' component={Profiles} />
      <Route exact path='/profile/:id' component={Profile} />
      <PrivateRoute exact path='/dashboard' component={Dashboard} />
      <PrivateRoute exact path='/posts' component={Posts} />
      <PrivateRoute
        exact
        path='/create-profile'
        component={CreateProfile}
      />
      <PrivateRoute exact path='/edit-profile' component={EditProfile} />
      <PrivateRoute exact path='/add-education' component={AddEducation} 
       />
      <PrivateRoute
        exact
        path='/add-experience'
        component={AddExperience}
      />
       </Switch>
         </section>
         </Router>

Answer 1

 <Link to='/profiles'>
    <img className='round-img' src={avatar} alt='' />
    <h4>{name}</h4>
  </Link>
 <Link to={ "/post/" + id } className='btn btn-primary'>
   Discussion{" "}
   <span className='comment-count'>
   {comments.length > 0 && <span>comments.length</span>}
   </span>
</Link>

вы допустили ошибку в правописании, она не соответствует ни одному маршруту /profile.

нет связанных маршрутов / post / $ id, проверьте это также в вашем файле маршрута

import React, { Component } from 'react';
import history from './history';
import {Route,Router, Switch } from 'react-router-dom';
import App from './App'
import Demo from './Demo'
class Routes extends Component {
 render() {
  return (
  <Router history={history}>
      <Switch>
        <Route exact path="/" component={App}/>
        <Route exact path="/demo" component={Demo}/>
      </Switch>
  </Router>
 );
 }
}
export default Routes

установить библиотеку истории npm и создать файл history.js в папке src и добавить эти строки

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

я думаю, что тогда возможно маршрутизировать