React router not rendering components?

Question

I'm trying to render out new components without showing the original home component. I separated my components and now when I try to render them out it doesn't display.

class App extends Component {
render() {
return (
  <div>
      <Route exact={true} path="/" component={Home} />
  </div>
);
}
}

Here is my home component that is supposed to render the About component and Pages component, but currently when I click it it doesn't display anything.

const Home = () => (
<div>
    <h2>Home page</h2>
    <div>
        <ul>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/pages">Page with Subpages</Link></li>
        </ul>
        <Route path="/about" component={About} />
        <Route path="/pages" component={Pages} />
    </div>
</div>
)

My About component:

const About = () => (
<div>
    <h2>About page</h2>
</div>
)

My pages component:

const Pages = ({ match }) => (
<div>
    <h2>Page with Subpages</h2>
    <ul>
        <li><Link to={`${match.url}/subpage1`}>Subpage 1</Link></li>
        <li><Link to={`${match.url}/subpage2`}>Subpage 2</Link></li>
        <li><Link to={`${match.url}/subpage3`}>Subpage 3</Link></li>
    </ul>

    <Route path={`${match.url}/subpage1`} component={Subpage1}/>
    <Route path={`${match.url}/subpage2`} component={Subpage2}/>
    <Route path={`${match.url}/subpage3`} component={Subpage3}/>
</div>
)

Slawa Eremin · Accepted Answer · 2017-12-12 01:11:48Z

1

I think, you should delete exact from <Route path="/" component={Home} />, because in your case you place About and Pages component under Home, so when you go to /about url, there is no Home component anymore, because you put exact there, so you see a blank screen;

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

Full working example here: https://codesandbox.io/s/mjr8xypp4x

answered Dec 12, 2017 at 1:11

Slawa Eremin

5,42521 silver badges29 bronze badges

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

Comments

Meet Zaveri · Accepted Answer · 2017-12-12 12:35:36Z

You must have forgot to add <Router> component as of <BrowserRouter> which has to be embeded as main component in class Component where main Route is defined,

Here's the solution -

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

class Appz extends React.Component {
    render() {
      return (
        <Router>
         <div>
           <ul>
            <li><Link to="/about">Home</Link></li>
           </ul>
           <div>
            <Route path="/" component={Home} />
           </div>
          </div>
        </Router>
      );
    }
}

const Home = () => (
  <div>
    <h2>Home page</h2>
    <div>
      <ul>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/pages">Page with Subpages</Link></li>
      </ul>
      <Route path="/about" component={About} />
      <Route path="/pages" component={Pages} />
    </div>
  </div>
)

const About = () => (
  <div>
    <h2>About page</h2>
  </div>
)

const Pages = ({ match }) => (
  <div>
    <h2>Page with Subpages</h2>
    <ul>
      <li><Link to={`${match.url}/subpage1`}>Subpage 1</Link></li>
      <li><Link to={`${match.url}/subpage2`}>Subpage 2</Link></li>
      <li><Link to={`${match.url}/subpage3`}>Subpage 3</Link></li>
    </ul>


  </div>
)

export default Appz;

Working example - https://codesandbox.io/s/kxmj48p14v

Collectives™ on Stack Overflow

React router not rendering components?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related