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

#reactjs #react-router-dom

#reactjs #react-router-dom

Вопрос:

У меня есть родительский компонент и два дочерних компонента. Оба компонента появляются, когда я нажимаю в меню без каких-либо проблем. Проблема в том, что когда я ввожу 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
  

Комментарии:

1. вы определили маршрут как /portfolio/casas и открываете /portfolio/houses в браузере, здесь ошибка или это ваш фактический код? onclick работает, потому что NavLink имеет правильное to значение, такое же, как определенный маршрут .

2. Это была ошибка перевода, когда я передал ее в stack overflow. Я отредактирую вопрос.

3. отредактированный вопрос

4. это полный код? кажется, что для вашего компонента маршрута отсутствует код с путем /portfolio/casas

5. вы используете exact несколько маршрутов, и exact путь должен быть "/"

Ответ №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>