How to make using of react-router-dom for routing in Reactjs?

Question

I have made 3 components

1)Navbar

2)Content

3)Pagination

On home page I want to display all 3 components. I have made another component Matchinfo which should get displayed when we click on view stats button (see screenshot for more clarification) .

In app.js how should I make use of Routes so that 3 components will get display on home page i.e localhost:3000/ and when I click on view stats button it should render component Matchinfo.

In app.js :

import React, { Component } from 'react';
import { Route, NavLink, HashRouter } from "react-router-dom";
import './App.css';
import Navbar from './components/navbar';
import Content from './components/content';
import Pagination from './components/pagination';
import Matchinfo from './components/matchinfo';

class App extends Component {
  render() {
    return (
        <div className="App">

          <div className="content">
            <Route path="/" component={Navbar, Content, Pagination}/>
            <Route path="/match" component={Matchinfo}/>
          </div>
        </div>
    );
  }
}

export default App;

Answer 1

You no need to call these components in app.js using routes. I would request you to create sepearte component like Home(see example below home.js).

Then, In app.js call Home component

import Home from './components/home'; 

<Route path="/" component={Home}/>

create home.js under components

Call Navbar, Content annd Pagination components in Home component

import React, {Component} from "react";
import Navbar from './components/navbar';
import Content from './components/content';
import Pagination from './components/pagination';

class Home extends Component {
  constructor(props) {
    super(props);        
    this.state = {

    }
  }

  componentWillMount() {

  }

  render() {
    return (
      <div>  
        <Navbar/>
        <Content />
        <Pagination/>
      </div>
    )
  }
}

export default Home;

Since you want to display Navbar, Content annd Pagination components in home page so do it like above way. Here Home is your parent component and Navbar, Content annd Pagination are child components to Home.

One route is enough mostly for one web page and in React most of times you will play with child components. You no need to configure all the components with routes.

Answer 2

There are several ways achieving the result. The first one is using render method for home Route. Also, use exact attribute of Route to ensure the location is matched exactly.

import React, { Component } from 'react';
import { Route, NavLink, HashRouter } from "react-router-dom";
import './App.css';
import Navbar from './components/navbar';
import Content from './components/content';
import Pagination from './components/pagination';
import Matchinfo from './components/matchinfo';

class App extends Component {
  render() {
    return (
        <div className="App">
          <div className="content">
            <Route path="/" render={(props) => (
                <React.Fragment>
                      <Navbar/>
                      <Content />
                      <Pagination/>
                <React.Fragment/>
            )} exact/> 
            <Route path="/match" component={Matchinfo} exact/>
          </div>
        </div>
    );
  }
}

export default App;

The second one, create auxiliary component Home, for example, and include it in your route, like this:

<Route path="/" component={Home} exact/>