ReactJS - Проблема с компонентами маршрутизации

Question

У меня есть родительский компонент и два дочерних компонента. Оба компонента появляются, когда я нажимаю в меню без проблем. Проблема в том, что когда я набираю URI в браузере, появляется только родитель и первый дочерний компонент. Второй ребенок не появляется.

в браузере для отображения первый дочерний компонент http: // localhost: 3000 / портфолио ХОРОШО. Это появляется без проблем

Я набираю в браузере, чтобы появился второй дочерний компонент

http: // localhost: 3000 / портфолио / 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

Answer 1

не должно быть нескольких точных путей в маршрутизаторе, и точный путь должен быть корневым путем, я думаю, что это exact path="/".

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

              </ul>
            </nav>
          </div>
        </Router>