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!