小编Vic*_*cki的帖子

我正在使用 react-router-bootstrap 和 react-router V4，以及用于开发的 Webpack

我的问题是我创建了诸如 /services/firstService 之类的路径，但是在重新加载时它给出了 404

我得到了我的index.js

ReactDOM.render(
    <Router>
        <App />
    </Router>
    , document.getElementById('container'));

然后是我的App.jsx，它是我的“主要”组件

export default class App extends React.Component {
    render() {
        return (
            <div>
                <Navigation/>
                <div className="content">
                    <Route exact={true} path="/" component={Home}/>
                    <Route exact={true} path="/home" component={Home}/>
                    <Route path="/services" component={Services}/>
                    <Route path="/infos" component={Infos}/>
                    <Route path="/contacts" component={Contacts}/>
                    <Route path="/basic" component={BasicComponent}/>
                </div>
            </div>
        );
    }
}

所述导航部件是一个简单的反应，路由器的自举/反应的自举链接

export default class Navigation extends React.Component {
    render() {
        return (
            <Navbar>
                <Nav>
                    <LinkContainer to="/home"> …

我想知道什么是“正确的解决方案”，即如何在页面中正确显示轮播或如何进行。

http://i.imgur.com/m8VYVRv.png

来自 react-bootstrap 组件网站的代码

             <Well>
                <Carousel>
                    <Carousel.Item>
                        <img width={900} height={500} alt="900x500" src="src/assets/construction-maison.jpg"/>
                        <Carousel.Caption>
                            <h3>First slide label</h3>
                            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                        </Carousel.Caption>
                    </Carousel.Item>
                    <Carousel.Item>
                        <img width={900} height={500} alt="900x500" src="src/assets/chantier.jpg"/>
                        <Carousel.Caption>
                            <h3>Second slide label</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        </Carousel.Caption>
                    </Carousel.Item>
                    <Carousel.Item>
                        <img width={900} height={500} alt="900x500" src="src/assets/Maison_en_construction_Demoli.jpg"/>
                        <Carousel.Caption>
                            <h3>Third slide label</h3>
                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                        </Carousel.Caption>
                    </Carousel.Item>
                </Carousel>
            </Well>

http://i.imgur.com/BgqNfTE.png

img {
    margin: auto;
}

这是我带来的解决方案，但感觉有点“关闭”。

是否应该使用自动边距缩小轮播以匹配图片的大小，然后将其放在页面中央？