javascript - 在react router v4中渲染子路由

Question

在开始之前，我已经访问了 https://reacttraining.com/react-router/web/guides/quick-start掌握 React Router 的工作原理。我在 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 因此它不会渲染任何内容。如果您将 User.js 中的 Route 路径和 Link 更改为 /user/artwork ，它应该开始工作根据需要。

为了使您的 User 组件更具可组合性/可重用性，您需要执行与 React 训练相同的操作，并在 props 上使用传入的 match.url 。