React component not rendering with React Router

Question

I am having some trouble with a component not rendering after following its route. The routes are created in a parent component Drawings, and send a couple of props to Drawing components.

When I click the link, I get to the correct path, for example, /drawing/20170724, and the log statement I have in the render function runs. I also get the props, so far so good. However, the return doesn't happen, so the HTML I need isn't available.

Here is Drawings where the routes and links are created:

import React, { Component } from "react";
import { Route, Link } from "react-router-dom";
import AnimatedWrapper from "../modules/AnimatedWrapper";

import Drawing from '../components/Drawing';

class DrawingsComponent extends Component {
  render() {
    const drawings = this.props.drawings;
    const drawingsMap = this.props.drawingsMap;

    return(
      <div>
        <div className="page">
          <div className="drawings-list">
            {
              drawings.map((drawing) => {
               return(
                <Link to={`/drawing/${drawing.date}`} key={drawing.date}>
                  <div className="drawing-thumb">
                    <h2>{drawing.date}</h2>
                  </div>
                </Link>
                )
              })
            }
          </div>
          {
          Object.keys(drawingsMap).map((d, i) => {
            return <Route path={`/drawing/${drawings[i].date}`} render={(props) => (<Drawing drawingPkg={drawingsMap[d]} drawingInfo={drawings[i]} {...props} />)} key={`${drawings[i].date}`}/>
          })}
        </div>
      </div>
    )
  }
}

const Drawings = AnimatedWrapper(DrawingsComponent);
export default Drawings;

And here is Drawing:

import React, { Component } from 'react';
import AnimatedWrapper from "../modules/AnimatedWrapper";

class DrawingComponent extends Component {
    render() {
        const drawing = this.props.drawingPkg;
        const drawingInfo = this.props.drawingInfo;

        console.log('gonna draw now');

        return(
            <div className="drawing">
                <h2 className="drawing-title">{drawingInfo.title}</h2>
                <canvas></canvas>
            </div>
        )
    }
}

const Drawing = AnimatedWrapper(DrawingComponent);
export default Drawing;

I can't figure out why the Drawing component isn't returning.

The console error will help others understand your situation quicker ? please help to provide it. — thelonglqd
– thelonglqd, Commented Aug 1, 2017 at 0:49
I'm sorry, there are no console errors -- everything seemingly runs fine. I click the link and my log statement in the DrawingComponent logs 'gonna draw now' in the console, but the return statement never seems to run, as the HTML that should be returned isn't present in the DOM. — alightedlamp
– alightedlamp, Commented Aug 1, 2017 at 2:19

halfer · Accepted Answer · 2021-04-03 23:39:29Z

1

What you are doing is wrong. You change the URL when the link is clicked. Then you have to give routes configuration, that tells react router which component to render when the URL changes. It should be something like this inside your index.js file.

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

import reducers from './reducers';
import Drawing './components/drawing_component';


const createStoreWithMiddleware = applyMiddleware(promise)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <BrowserRouter>
      <div>
        <Switch>
            <Route path="/drawings/:date" component={Drawing} />
            <Route path="/" component={IndexComponent} />
        </Switch>
      </div>
    </BrowserRouter>
  </Provider>
  , document.querySelector('.container'));

I think what is wrong here is your routes config. I have never seen route config is given like the way you do.

Then write a separate Drawing component which renders a given drawing instance.

With this change your Link should be like this.

<Link to={`/drawing/${drawing.date}`}>
  {drawing.date}
</Link>

The bottom line is this. Here you give some text with a hyperlink. Upon clicking this router changes the URL as in your case now. Then it uses router config to render the relevant component.

edited Apr 3, 2021 at 23:39

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Aug 1, 2017 at 3:39

Ravindra Ranwala

21.2k7 gold badges50 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

alightedlamp Over a year ago

Thanks! That helped -- works, and is organized better now. :)

Collectives™ on Stack Overflow

React component not rendering with React Router

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related