在反应路由器 v4 中渲染子路由

Question

在我开始之前，我已经在https://reacttraining.com/react-router/web/guides/quick-start 上了解了 React 路由器的工作原理。我在 react 中创建了一个简单的 3 页站点，我想创建一个列表，让我可以显示一些嵌套组件。而 reacttraining.com 上的示例可以很好地在单打 js 文件中运行。我的网站分为 3 个 js 文件：

APP.JS

import React, {Component} from 'react';

import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom';


import {Home} from './Home';
import {User} from './User';
import {Artwork} from './artwork'
import {Header} from './header';



class App extends Component {



render(){
    return (

        <Router>
            <div className="container">
                <div className="row">
                    <div className="col-xs-10 col-xs-offset-1">
                        <Header />
                    </div>
                </div>
                <hr/>
                <div className="row">
                    <div className="col-xs-10 col-xs-offset-1">
                        <Route path="/" exact component={Home}/>
                        <Route path="/home" exact component={Home}/>
                        <Route path="/user" component={User}/>

                    </div>
                </div>
            </div>
        </Router>

    );
 }


}

export default App;

USER.JS 于 2017 年 3 月 28 日编辑

import React, {Component} from 'react';
import {Artwork} from './artwork';
import {Route, Link} from 'react-router-dom';


export class User extends Component {


render() {
    return (


    <div className="row">
        <div className="col-md-4">
            <h3>The User Page</h3>
            <p>User ID:</p>
            <li><Link to="/user/artwork">Artwork</Link></li>
        </div>
        <div className="col-md-8">
            <Route path="/user/artwork" component={Artwork}/>
        </div>

    </div>

    );
   }
}

export default User;

ARTWORK.JS

import React, {Component} from 'react';

export class Art extends Component {


render(){
    return (
        <div>
            <h3>Art</h3>
        </div>
    );
}
}

export default Art;

我遇到的问题是，虽然我可以导航到我的顶级菜单项（主页和用户），但我无法访问用户页面上的艺术品组件。当按下艺术品按钮时，我的用户组件被删除。

Answer 1

如果您查看react-training 上的基本示例，您会注意到主题组件中的“子”Route 具有${match.url}/:topicId 作为路径：

<Route path={`${match.url}/:topicId`} component={Topic}/>

这基本上是把它变成topics/:topicId，这是必需的，因为最顶层的组件不知道如何处理:topicId。

同样，在您的情况下，您的App.js 不知道如何处理/artwork，因此它不会渲染任何内容。如果您将Route 路径和Link 更改为User.js 中的/user/artwork，它应该会按需要开始工作。

为了使您的 User 组件更具可组合性/可重用性，您需要做与反应训练相同的事情，并在 props 上使用传入的 match.url。