反应路由器不渲染组件？

Question

我正在尝试渲染新组件而不显示原始home组件。 我分离了组件，现在当我尝试渲染它们时，它不显示。

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

这是我的home组件，应该呈现About组件和Pages组件，但是当前单击它时不显示任何内容。

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>

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

Answer 1

我认为，您应该从<Route path="/" component={Home} />删除exact ，因为在这种情况下，您将About和Pages组件放置在Home下，因此当转到/about url时，没有Home组件再说一遍，因为您输入的exact ，所以您会看到一个空白屏幕；

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

完整的工作示例在这里： https : //codesandbox.io/s/mjr8xypp4x

Answer 2

您必须忘记从<BrowserRouter>开始添加<Router>组件，该组件必须作为定义了主Route Component类中的主要组件嵌入，

这是解决方案-

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;

工作示例-https://codesandbox.io/s/kxmj48p14v