React Router Issue:-URL changes but not view or not Rendering Component

Question

I developed App that is working good but sometimes some of component not rendering when i click on links. urls always changes but not view.. so kindly help me And tell the permanent solution of this problems. Because I am stuck with this It's creating more issues for me.. kindly help..

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 Or App This is App compnent where all other components are imported..

  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>

Please add code to your question to review things. – Sain Pradeep Sep 19 '19 at 09:31 — Sain Pradeep, Sep 19 '19 at 09:31
please add your route.js code – Kishan Jaiswal Sep 19 '19 at 09:46 — Kishan Jaiswal, Sep 19 '19 at 09:46
please add route.js file – Kishan Jaiswal Sep 19 '19 at 09:58 — Kishan Jaiswal, Sep 19 '19 at 09:58
has Added plz look review and explain – Muhammad Faisal Sep 19 '19 at 10:29 — Muhammad Faisal, Sep 19 '19 at 10:29

Kishan Jaiswal · Accepted Answer · 2019-09-19T12:32:26.057

0

 <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>

you have made mistake in spelling ,its not matching any route /profile.

there is no any routes related /post/$id ,please check that also in your route file

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

install history npm library and create history.js file in src folder and add this lines

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

i think then it possible to route

edited Sep 19 '19 at 12:32

answered Sep 19 '19 at 12:13

Kishan Jaiswal

621
3
12

please add which route component are not rendering – Kishan Jaiswal Sep 19 '19 at 12:21
url changes but not rendering components – Kishan Jaiswal Sep 19 '19 at 12:21
About that i am not asking it's need to import that i know but issue is still there with other... – Muhammad Faisal Sep 19 '19 at 12:21
Urls change in bar but not changing view – Muhammad Faisal Sep 19 '19 at 12:22
For changing in view i need to reload that sometime cause my state – Muhammad Faisal Sep 19 '19 at 12:23
https://reacttraining.com/react-router/web/api/Router refer this link and add history npm library to your routing file – Kishan Jaiswal Sep 19 '19 at 12:25
https://stackoverflow.com/questions/44356360/react-router-work-on-reload-but-not-when-clicking-on-a-link refer this link also ,while using in component you have to also use withRouter to component – Kishan Jaiswal Sep 19 '19 at 12:34

React Router Issue:-URL changes but not view or not Rendering Component

1 Answers1