React-router-dom v4 路由以及如何在子组件中显示答案

【问题标题】：React-router-dom v4 routes and how to display inside children componentsReact-router-dom v4 路由以及如何在子组件中显示
【发布时间】：2017-10-12 16:50:44
【问题描述】：

首先，我想确认https://github.com/reactjs/react-router-tutorial 已被弃用，不再用于支持https://github.com/ReactTraining/react-router

我也在使用 react-router-bootstrap，因为它可以方便快速构建

我的问题是我似乎无法创建 /services/firstService 等路径

我得到了我的 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>
        );
    }
}

导航组件只是一个 react-router-bootstrap/react-bootstrap 链接

export default class Navigation extends React.Component {
    render() {
        return (
            <Navbar>
                <Nav>
                    <LinkContainer to="/home">
                        <NavItem eventKey={1}>Home</NavItem>
                    </LinkContainer>
                    <LinkContainer to="/services">
                        <NavItem eventKey={2}>Services</NavItem>
                    </LinkContainer>
                    <LinkContainer to="/infos">
                        <NavItem eventKey={3}>Infos</NavItem>
                    </LinkContainer>
                    <LinkContainer to="/contacts">
                        <NavItem eventKey={4}>Contacts</NavItem>
                    </LinkContainer>
                </Nav>
            </Navbar>
        );
    }
}

现在据我了解，我需要在 Services 组件中创建一个链接，看起来像

<Link to={`${match.url}/firstService`}>
    firstService
</Link>

Services 组件几乎是空的，我想在这里显示一个组件 {FirstService} 并将路径更改为 /services/firstService，与 secondService 相同

export default class Services extends React.Component {
    constructor(props) {
        super( props );
    }

    render() {
        return (
            <div>
                ul/li
                <Link to={`${match.url}/firstService`}>
                    firstService
                </Link>
                <Link to={`${match.url}/firstService`}>
                    firstService
                </Link>
                ul/li
                <Route path={`${match.url}/firstService`} component={FirstService}/>
                <Route path={`${match.url}/secondService`} component={SecondService}/>
            </div>
        );
    }
}

但是如果这是正确的方法（我从反应训练中的基本示例中获取）我似乎无法让它工作，或者它告诉我ReferenceError: match is not defined

什么是让它工作的正确方法？

【问题讨论】：

在Services 你应该使用道具访问match 对吧？喜欢this.props.match.url
它确实可以在更改 URL 时显示我想要的内容，完全忘记了道具，但现在我遇到了另一个问题，如果我重新加载页面，我会得到一个 'GET localhost:8080/services/index_bundle.js 404 (未找到）'
不确定是什么导致了这个问题。可能这应该是您的 webpack 设置中的问题。
事情是，我的 historyApiFallback: true 在我的 webpack.config 中被激活所以我真的不知道，重新加载对于普通链接来说工作得很好但是当它是 /services/firstService 时，我得到一个 404

标签： reactjs react-router

【解决方案1】：

由于<Link to={${match.url}/firstService}> 在另一个组件中，您必须使用this.props. 才能使其工作

所以你现在有了<Link to={${this.props.match.url}/firstService}>

问题解决了，但是又出现了一个错误，准备再发一个帖子。

【讨论】：