ReactJS

Question

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

在浏览器中显示第一个子组件 http://localhost:3000/投资组合好的。这似乎没有问题

我在浏览器中输入出现第二个子组件

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

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>

ReactJS - 关于路由组件的问题

ReactJS - Issue about routing components

react-router-dom