React-路由器不显示组件

Question

我已经阅读了所有相关条目。但是，我的问题仍然存在。 我有以下 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')
);

我尝试通过 jumbotron 中的 NavLink 链接到我的 About_Screen.js。这也显示在 URL (http://localhost:8080 / About_Screen) 中。不幸的是，路由不起作用。 这是 About_Screen.js：

import React, {Component} from 'react'; 从'react-router'导入{Link}；

 class About_Screen extends React.Component{

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

我的错误在哪里？我链接路由错误吗？ 我的数据结构如下：

• 应用程序
  • 源
    • App.js
    • index.html
      • 屏幕
      • About_Screen.js

非常感谢您的帮助！

Answer 1

如上所述，您不会在 App 类中打印任何内容。您需要在其中插入{this.props.children}。例如：

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>
 ....
   )
  }
}

以上代码将在可折叠面板内显示<h1>SCREEN 1 DATA</h1>。

编辑： 如果要重新加载页面，则将此部分修改为：

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

<App> 只会在您转到"/" 时显示。当您单击该页面上的 NavLink 时，该页面将重新加载到 "/About_Screen"。