Reactjs React路由器v4嵌套路由在子级别时不工作

我正在尝试构建一个React应用程序，这是我第一次使用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浏览导航时，我可以访问/car/sedan和/car/coupe，但当我在/car/coupe页面时，我不能访问/car/sedan，反之亦然

---

导航只是卡住了，无法加载，请告诉我如何修复此问题我甚至尝试了许多选项，但所有选项都给了我这个结果，至少如果我知道如何调试它会更好，谢谢。

我不知道您的设置如何部分工作，不应该使用此配置。您需要的是：

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

因此，如果仅当您点击/car时，您的汽车组件才会渲染。对于/car/sedan和/car/coupe，您将看到相关组件。如果不使用exact for/car，/car/sedan和/car/coupe将渲染汽车组件

---

此外，不要使用相同的组件名称。你有两个汽车部件。将容器重命名为其他名称，应用程序可能？

尝试此操作，确切路径应作为最后一个选项放置

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

---

试着在另外两个下面放一个更通用的/carroute。事实上，我使用的是React Redux，所以这可能与此有关。我已经尝试了你的代码，只包括确切的in/car，而不是其他的，而且我现在已经将名称更改为不同的名称，但它仍然给出相同的结果。我可以从/car访问/car/sedan，但不能从它自己的级别访问，比如单击从/car/sedan到/car/coupe的链接。Thanksreact redux与此问题无关。请参见一个工作示例：