React- Router not show component

Question

I have already read all related entries. However, my problem still exists. I have the following App.js:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {NavLink} from 'react-router-dom';
import { BrowserRouter, Route } from 'react-router-dom';
import About_Screen from './screen/About_Screen.js';

class App extends Component {

 constructor(props){
 super(props)
 this.state = {};
 }

render(){
 return(

  <div className="app">     
    <main role="main">
    <Jumbotron fluid>
      <h1>Welcome</h1>
       <NavLink to="/About_Screen">About</NavLink>
        <Panel collapsible expanded={this.state.open}>
         wes anderson
        </Panel>
   </Jumbotron>
<Grid>
<Row>
<Col xs={6} md={2}>
  <Thumbnail src={require("./watch.png")}>
    <h5>Thumbnail label</h5>
      <Button onClick={ ()=> this.setState({ open: !this.state.open })}>
        ?
      </Button>
      <Panel collapsible expanded={this.state.open}>
      Smart
      </Panel>
      <p>
       <Checkbox inline></Checkbox>
      </p>
   </Thumbnail>
 </Col>
 ....
   )
  }
}

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

I try to link via NavLink within the jumbotron to my About_Screen.js. This is also displayed in the URL (http: // localhost: 8080 / About_Screen). Unfortunately the routing does not work. Here's About_Screen.js:

import React, {Component} from 'react'; import {Link} from 'react-router';

 class About_Screen extends React.Component{

  render (){
   return(
    <div>  
     <h1>SCREEN 1 DATA</h1>
    </div>  
   );
  }
 }
 export default About_Screen;

Where is my mistake? Do I link the routing wrong? My data structure looks as follows:

App
- src
  - App.js
  - index.html
    - screen
    - About_Screen.js

Thank you very much for your help!

Do you have { this.props.children }, anywhere in your App component render method? — drinchev
When I enter About_Screen I want to show (more or less) the same page. So everythink should be renderd. — CUR
Where do you want to see the changes? Your App class is actually rendering and somewhere inside you ( probably ) want to render your routed component ( SCREEN 1 DATA ), that's the place that you need to put your { this.props.children } in it. — drinchev

Win Win · Accepted Answer · 2017-08-12T10:10:35

As explained above, you do not print anything in your App class. You need to insert {this.props.children} in it. For example:

class App extends Component {

 constructor(props){
 super(props)
 this.state = {};
}

render(){
 return(

  <div className="app">     
    <main role="main">
    <Jumbotron fluid>
      <h1>Welcome</h1>
       <NavLink to="/About_Screen">About</NavLink>
        <Panel collapsible expanded={this.state.open}>
         // this is the code to print About_Screen
         {this.props.children}
        </Panel>
   </Jumbotron>
<Grid>
<Row>
<Col xs={6} md={2}>
  <Thumbnail src={require("./watch.png")}>
    <h5>Thumbnail label</h5>
      <Button onClick={ ()=> this.setState({ open: !this.state.open })}>
        ?
      </Button>
      <Panel collapsible expanded={this.state.open}>
      Smart
      </Panel>
      <p>
       <Checkbox inline></Checkbox>
      </p>
   </Thumbnail>
 </Col>
 ....
   )
  }
}

The above code will show <h1>SCREEN 1 DATA</h1> inside the collapsible panel.

Edited: If you want to reload the page, then modify this section to:

<BrowserRouter>
  <div>
  <Route exact path="/" component={App} />
  <Route path="/About_Screen" component ={About_Screen} />
  </div>
</BrowserRouter>

<App> will only be displayed when you go to "/". When you click the NavLink on that page, the page will be reloaded to "/About_Screen".

React- Router not show component

2 Answers