#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>