Question

在开始之前，我一直在https://reacttraining.com/react-router/web/guides/quick-start上了解反应路由器的工作原理。我已经创建了一个简单的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;

我遇到的问题是，虽然我可以浏览到我的顶级菜单项（主页和用户），但我无法访问用户页面上的艺术作品组件。按下图稿按钮时，我的用户组件被删除。我不确定我哪里出错了，反应和路由器对我来说都是新的，所以任何帮助都会非常感激。

tnxs

Answer 1

如果您正在查看react-training上的基本示例，您会注意到＆＃34;孩子＆＃34;主题组件中的Route以${match.url}/:topicId作为路径：

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

这基本上将其转换为topics/:topicId，因为最重要的组件不知道如何处理:topicId。

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

为了使您的用户组件更具可组合性/可重用性，您需要做同样的事情来做出反应训练并使用传递给match.url的道具。

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

1 个答案: