Question

我有一个父组件和两个子组件。当我在菜单中单击时，两个组件均出现，没有任何问题。问题是当我在浏览器中键入URI时，仅父级和第一个子级组件出现。第二个孩子没有出现。

在浏览器中显示

第一个子组件 HTTP：//本地主机：3000 /公文包好。看来没有问题

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

http：// //本地主机：3000 /投资组合/卡萨斯

它没有出现。

这是父组件：

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-有关路由组件的问题

1 个答案: