ReactJS-关于路由组件的问题

我有一个父组件和两个子组件。当我在菜单中单击时,两个组件都显示出来,没有任何问题。问题是,当我在浏览器中键入URI时,只显示父组件和第一个子组件。第二个孩子没有出现。

第一个子组件 http://localhost:3000/portfolio 好 啊。这看起来没有问题

我在浏览器中键入以显示第二个子组件

http://localhost:3000/portfolio/casas

它没有出现。

这是父组件:

import React, { Component } from 'react'
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom'

import Intro from './Intro'
import Houses from './Houses'


class PortfolioMenu extends Component {  
  render() {

    return (
      <div>
        <Router>
          <div class={`wrapper2 ${portfolioClass}`}>
            <div class="wrapper-portfolio">
             <Route exact path='/portfolio' render={() => <Intro />} />
             <Route path='/portfolio/casas' render={() => <Houses/>}/>      
            </div>
            <nav>
              <ul className={`portfolio-menu ${portfolioClass}`}>
                <li><NavLink exact to="/portfolio"><span className="bullet">•</span> introdução</NavLink></li>
                <li><NavLink exact to="/portfolio/casas"><span className="bullet">•</span> casas</NavLink></li>

              </ul>
            </nav>
          </div>
        </Router>
      </div>
    )
  }
}

export default PortfolioMenu

这是第一个子组件:

import React, { Component } from 'react'

class Intro extends Component {

  render() {
    return (
      <div>
        <div>This is the Intro Component</div>
      </div>

    )
  }

}

export default Intro

这是第二个子组件:

import React, { Component } from 'react'

class Houses extends Component {

  render() {
    return (
      <div>
        <div>This is the Second Component</div>
      </div>
    )
  }

}

export default Houses