The component that uses Router does not show up on Button click event

Question

I am implementing the page where a user can select between two options: Button 1 redirects to TestOption.js or Button 2 redirects to TestOption2 (currently, TestOption is used for testing purposes). The default page is SelectionPage.

The problem is with the Button click event. In SelectionPage, I'm using onClick={this.props.clickBtn}. When I click on the button, it opens a new page with Header only, but without Main. I assume that the problem is caused by Router that I use in Main. But I don't know how to fix it.

Could someone point me to an error?

Thanks.

The code of App.js:

import React, { Component } from 'react';
import './App.css';
import TestOption from './components/TestOption';
import SelectionPage from './components/SelectionPage';

class App extends Component {

  state = {
    renderView: 0
  };

  clickBtn = e => {
    console.log(e.target.value);
    this.setState({
      renderView: +e.target.parentNode.value
    });
  };


  render() {

    switch (this.state.renderView) {
      case 1:
        return (
          < TestOption />
        );
      case 2:
        return (
          < TestOption />
        );
      default:
        return (
          < SelectionPage clickBtn={this.clickBtn} />
        );
    }
  }

}

export default App;

The code of SelectionPage.js:

import React, {Component} from 'react';
import Button from '@material-ui/core/Button';
import Grid from "@material-ui/core/Grid";
import CssBaseline from "@material-ui/core/CssBaseline";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
import withStyles from "@material-ui/core/styles/withStyles";


const styles = theme => ({
  card: {
    minWidth: 350
  },
  button: {
    fontSize: "12px",
    margin: theme.spacing.unit,
    minWidth: 350
  },
  extendedIcon: {
    marginRight: theme.spacing.unit
  },
  title: {
    fontSize: '20px',
    minWidth: 350,
    margin: theme.spacing.unit
  },
});


class SelectionPage extends Component {

  render() {
    const { classes } = this.props;

    return (
      <React.Fragment>
        <CssBaseline />
        <Grid
          container
          spacing={0}
          direction="column"
          alignItems="center"
          justify="center"
          style={{ minHeight: "100vh" }}
        >
          <Card className={classes.card}>
            <Typography align="center" className={classes.title}>
              Select the option
            </Typography>
            <CardContent>
              <Grid item xs={3}>
                <Button
                  variant="contained"
                  size="medium"
                  color="primary"
                  className={classes.button}
                  value="1"
                  onClick={this.props.clickBtn}
                >
                  Option 1
                </Button>
              </Grid>
              <Grid item xs={3}>
                <Button
                  variant="contained"
                  size="medium"
                  color="primary"
                  className={classes.button}
                  value="2"
                  onClick={this.props.clickBtn}
                >
                  Option 2
                </Button>
              </Grid>
            </CardContent>
          </Card>
        </Grid>
      </React.Fragment>
    );
  }
}

export default withStyles(styles)(SelectionPage);

The code of TestOption:

import React, { Component } from 'react';
import './../App.css';
import { Header } from './Header';
import { Main } from './Main';


class TestOption extends Component {

  render() {

    return (
      <div className="App">
        <div className="Site-content">
          <div className="App-header">
            <Header />
          </div>
          <div className="main">
              <Main />
          </div>
        </div>
      </div>
    );
  }
}

export default TestOption;

The code of Main.js:

import '../App.css';
import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import { Tree } from './Tree';
import { Tabular } from './Tabular';

export function Main() {
    return (
        <div>
            <Router>
                  <Route path='/.' component={Tree} />
                  <Route path='/tabular' component={Tabular} />
            </Router>
        </div>
    )
}

Answer 1

<Route path='/tabular' component={Tabular} />
<Route path='/' component={Tree} />

changing the order of <Route> will fix your issue.