Reactjs 不渲染组件？

我试图在不显示原始主组件的情况下渲染出新组件。我分离了我的组件，现在当我尝试渲染它们时，它不会显示

class App extends Component {
render() {
return (
  <div>
      <Route exact={true} path="/" component={Home} />
  </div>
);
}
}

我的关于组件：

const About = () => (
<div>
    <h2>About page</h2>
</div>
)

const Pages = ({ match }) => (
<div>
    <h2>Page with Subpages</h2>
    <ul>
        <li><Link to={`${match.url}/subpage1`}>Subpage 1</Link></li>
        <li><Link to={`${match.url}/subpage2`}>Subpage 2</Link></li>
        <li><Link to={`${match.url}/subpage3`}>Subpage 3</Link></li>
    </ul>

    <Route path={`${match.url}/subpage1`} component={Subpage1}/>
    <Route path={`${match.url}/subpage2`} component={Subpage2}/>
    <Route path={`${match.url}/subpage3`} component={Subpage3}/>
</div>
)

const About=（）=>(
关于页面
)

我的页面组件：

const About = () => (
<div>
    <h2>About page</h2>
</div>
)

const Pages = ({ match }) => (
<div>
    <h2>Page with Subpages</h2>
    <ul>
        <li><Link to={`${match.url}/subpage1`}>Subpage 1</Link></li>
        <li><Link to={`${match.url}/subpage2`}>Subpage 2</Link></li>
        <li><Link to={`${match.url}/subpage3`}>Subpage 3</Link></li>
    </ul>

    <Route path={`${match.url}/subpage1`} component={Subpage1}/>
    <Route path={`${match.url}/subpage2`} component={Subpage2}/>
    <Route path={`${match.url}/subpage3`} component={Subpage3}/>
</div>
)

const Pages=（{match}）=>(
带子页的页面

第1子页
第2子页
第3子页

)

我认为，你应该从

中删除

exact

，因为在你的例子中，你把About和Pages组件放在Home下，所以当你转到

/About

url时，就没有Home组件了，因为你把

exact

放在那里，所以你会看到一个空白屏幕

class App extends React.Component {
  render() {
    return (
      <div>
        <Route path="/" component={Home} />
      </div>
  );
  }
}

类应用程序扩展了React.Component{
render（）{
返回(
);
}
}

---

这里的完整工作示例：

您一定忘了添加从

开始的

组件，该组件必须作为主组件嵌入到定义了main

Route

的类组件中

这是解决办法-

import React from 'react';
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

class Appz extends React.Component {
    render() {
      return (
        <Router>
         <div>
           <ul>
            <li><Link to="/about">Home</Link></li>
           </ul>
           <div>
            <Route path="/" component={Home} />
           </div>
          </div>
        </Router>
      );
    }
}

const Home = () => (
  <div>
    <h2>Home page</h2>
    <div>
      <ul>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/pages">Page with Subpages</Link></li>
      </ul>
      <Route path="/about" component={About} />
      <Route path="/pages" component={Pages} />
    </div>
  </div>
)

const About = () => (
  <div>
    <h2>About page</h2>
  </div>
)

const Pages = ({ match }) => (
  <div>
    <h2>Page with Subpages</h2>
    <ul>
      <li><Link to={`${match.url}/subpage1`}>Subpage 1</Link></li>
      <li><Link to={`${match.url}/subpage2`}>Subpage 2</Link></li>
      <li><Link to={`${match.url}/subpage3`}>Subpage 3</Link></li>
    </ul>


  </div>
)

export default Appz;

从“React”导入React；
进口{
BrowserRouter作为路由器，
路线
链接
}从“反应路由器dom”
类Appz扩展了React.Component{
render（）{
返回(

家

);
}
}
常量Home=（）=>(
主页

关于
带子页的页面

)
const About=（）=>(
关于页面
)
常量页=（{match}）=>(
带子页的页面

第1子页
第2子页
第3子页

)
导出默认Appz；

工作示例-