React Router v4 Nested Routing не работает в подуровне

Question

Я пытаюсь создать приложение React, это первый раз, когда я работаю с реагировать, и поэтому я не знаю, как решить эту проблему.По сути, мне нужно создать маршруты для ссылки, скажем, это следующие ссылки.

/car
/car/sedan
/car/coupe

У меня настроена маршрутизация следующим образом.

car.js

import React from 'react'
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'
import CoupeCar from './coupecar'
import SedanCar from './sedancar'

class Car extends React.Component {
    constructor(props){
        super(props);
    }

    render () {
        return (
            <div className="main_elem_container">
                <Router>
                    <Switch>
                        <Route path="/car" component={Car} />
                        <Route exact path="/car/sedan" component={SedanCar} />
                        <Route exact path="/car/coupe" component={CoupeCar} />
                    </Switch>
                </Router>
            </div>
        );  
    }
}

const Car = () => (
    <p>I'm a Car</p>
)

export default Car;

И маршрутизация работает, я могу посетить /car/sedan и /car/coupe, когда просматриваю навигацию с /car, но я не могу посетить /car/sedan, когда я на странице /car/coupe и наоборот.

Навигация просто зависает и не загружается, пожалуйста, дайте мне знать, как я могу это исправить, я даже попробовал много вариантов, но все они дают мне этот результат, по крайней мере, если бы я знал, какотладить это будет лучше, спасибо.

Answer 1

Я не знаю, как ваша установка работает частично, этого не следует делать с этим конфигом.То, что вам нужно, это:

<Router>
    <Switch>
        <Route exact path="/car" component={Car} />
        <Route path="/car/sedan" component={SedanCar} />
        <Route path="/car/coupe" component={CoupeCar} />
    </Switch>
</Router>

Итак, если только когда вы ударите / автомобиль, ваш автомобильный компонент рендерится.Для / автомобиль / седан и / автомобиль / купе вы увидите соответствующие компоненты.Если вы не используете exact для / car, / car / sedan и / car / coupe будет отображать компонент Car независимо от того, что.

Кроме того, не используйте одинаковые имена компонентов.У вас есть два компонента автомобиля.Переименуйте контейнер как-нибудь еще, приложение может быть?