React Router Link changes path, but doesn't render new component

Question

I'm trying to use React Router 4.2.2 in order to load a component called PostFocus whenever I click on a 'Card' component, with a Link wrapped around it. When I click on a 'Card' the path changes correctly, but the PostFocus component isn't rendered. Have I done something wrong or missed something out in the Route? I can't figure it out.

Here is the code:

class PostsList extends React.Component {
    render() {
        var createCards = this.props.posts.map((post, i) => {
            return (
                <div key={i}>
                    <Link to={`/${post.id}`}>
                        <Card title={post.title} subtitle={post.subtitle} date={post.date} id={post.id}/>
                    </Link>
                    <Route exact path={`/${post.id}`} render={(post) => (
                        <PostFocus content={post.content}/> 
                    )}/>
                </div>
            );
        });
        return (
            <div>
                {createCards}
            </div>
        );
    }

App Component:

import React from 'react';
import PostsList from '../containers/posts_list.js';
import {withRouter} from 'react-router';

class App extends React.Component {
    render() {
        return(
            <div>
                <PostsList />
            </div>
        );
    }
}

export default withRouter(App);

index.js code:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxPromise from 'redux-promise';
import { BrowserRouter } from 'react-router-dom';

import App from './components/App.jsx';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore);

ReactDOM.render(
        <Provider store={createStoreWithMiddleware(reducers)}>
            <BrowserRouter>
                <App />
            </BrowserRouter>
        </Provider>
, document.getElementById('root'));

Check this https://stackoverflow.com/questions/44356360/react-router-work-on-reload-but-not-when-clicking-on-a-link/44356956#44356956, it should solve your prblem — Shubham Khatri, Dec 11 '17 at 13:53
What's your `router.js` file (or equivalent) look like? I assume you've added the PostFocus route / component to the router definition? — user, Dec 11 '17 at 14:14
It still wouldn't work, because PostsList is the one that needs the router props, so you need to either wrap PostsList with withRouter or pass the props from App like `` — Shubham Khatri, Dec 11 '17 at 14:15

Aamir Iqubal · Answer 1 · 2018-05-18T09:05:24.973

4

I was also facing the same problem. I fixed it with a trick. You might have BrowseRouter in your App.js or index.js, I had it in my index.js like this :

ReactDOM.render(<BrowserRouter>
                    <App />
                </BrowserRouter>, document.getElementById('root'))

I changed it to :-

ReactDOM.render((
                    <BrowserRouter>
                      <Route component={App} />
                    </BrowserRouter>
                  ), document.getElementById('root'))

and it tricked, actually we are keeping the router look over our complete application by doing this, thus it also checks up with the routing path and automatically renders the view. I hope it helps.

Note:- Do not forget to import Route in your index.js

edited May 18 '18 at 09:05

answered May 18 '18 at 08:43

Aamir Iqubal

119
7

Wow. Thank you. – Z2VvZ3Vp Jul 23 '18 at 21:34
i have the same problem but in my project this don't work – Tom Karnaski Aug 05 '18 at 18:36
@Tom Karnaski, could you please provide your code snippet so that I can try to figure out. – Aamir Iqubal Aug 07 '18 at 03:22
https://pastebin.com/abKzwgpK or https://github.com/piratezxe/SimpleGalleryAppClient – Tom Karnaski Aug 07 '18 at 13:46
@TomKarnaski Hi.. please find the solution below. you need to import BrowserRouter ans implement. – Aamir Iqubal Aug 10 '18 at 17:44

score 0 · Answer 2 · answered Aug 10 '18 at 17:44

@Tom Karnaski Hi... Sorry for the late reply, I was not getting time to work on it.. Your code is running in my system, I didn't had access to push a branch in your repo.. make your App.js like below.. it will work for sure..

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom'
import Navbar from './Components/Navbar/Navbar';

class App extends React.Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Route component={Navbar}/>
        </div>
      </Router>
    );
  }
}

export default App;

score -1 · Answer 3 · answered Jan 06 '21 at 05:22

-1

I solved this problem simply use tag instead of Link helper. Not sure is it right or not, but it works for me, hope it will helps anybody else.

answered Jan 06 '21 at 05:22

Ruslan Valeev

400
4
12

React Router Link changes path, but doesn't render new component

3 Answers3