Question

我正在尝试构建一个React App，这是我第一次使用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 1}}页面，反之亦然。

导航刚刚卡住而且没有加载，请告诉我如何解决这个问题我甚至尝试了很多选项但是所有这些选项都给了我这个结果，至少如果我知道如何调试它会好起来的，谢谢。

Answer 1

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

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

所以，只要你点击/开车时你的汽车组件渲染。对于/ car / sedan和/ car / coupe，您将看到相关组件。如果您不使用exact / car，/ car / sedan和/ car / coupe将无论如何都会呈现Car组件。

另外，请勿使用相同的组件名称。你有两个汽车组件。将容器重命名为其他内容，App也许？

React Router v4嵌套路由在子级别时不起作用

1 个答案: