Question

我仍在搜索一个解释如何为以下场景构建结构的教程

on app boot /我已列出所有项目
点击特定项目重定向到新路线/ itemid并显示项目详情

到现在为止我的结构

app
-- dist
-- src
--- components
---- Layout.js
---- Items.js
---- Item.js
--- actions
--- stores
--- dispatchers
--- services
-- styles
Root.js
App.js
index.js
webpack.config.js
package.json

index.js

import React from 'react';
import { createHistory, createHashHistory } from 'history';
import Root from './Root';

const rootEl = document.getElementById('workshop-booker');
// Use hash location for Workshop Pages
// but switch to HTML5 history locally.
const history = process.env.NODE_ENV === 'production' ?
    createHashHistory() :
    createHistory();

React.render(<Root history={history} />, rootEl);

Root.js

import React, { PropTypes, Component } from 'react';
import { Router, Route } from 'react-router';

import App from './App';
import Workshops from './components/Workshops';
import Workshop from './components/Workshop';

export default class Root extends Component {
    static propTypes = {
        history: PropTypes.object.isRequired
    }

    render() {
        const { history } = this.props;
        return (
            <Router history={history}>
                <Route name='workshops' path='/' component={App}>
                    <Route name='workshop' path='/:slug' component={Workshop} />
                </Route>
            </Router>
        );
    }
}

App.js

import React, { PropTypes } from 'react';
import Layout from './components/Layout';
import DocumentTitle from 'react-document-title';

export default class App {
    static propTypes = {
        children: PropTypes.object
    };

    render() {
        return (
            <DocumentTitle title='Workshop Booker'>
                <div className='App'>
                    <Layout {...this.props} />
                    <hr />
                    {this.props.children}
                </div>
            </DocumentTitle>
        );
    }
}

布局组件

import React, { Component, PropTypes, findDOMNode } from 'react';
import shouldPureComponentUpdate from 'react-pure-render/function';
import Workshops from './Workshops';

export default class Layout extends Component {
    static propTypes = {
        params: PropTypes.shape({
            login: PropTypes.string,
            name: PropTypes.string
        })
    };

    static contextTypes = {
        history: PropTypes.object.isRequired
    };

    shouldComponentUpdate = shouldPureComponentUpdate;

    constructor(props) {
        super(props);
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            loginOrRepo: parseFullName(nextProps.params)
        });
    }

    render() {
        return (
            <div className='Explore'>
                    <Workshops />
            </div>
        );
    }
}

我一直关注这个e xample，主要是我的结构遵循背后的想法，但事实是所有继承的组件都被歪曲为孩子。如何生成结构以打开新视图？

但

Answer 1

如果您不希望将视图包装在另一个视图中，则不要将视图嵌套在组件或路径设置中。 Route配置可能看起来像这样：

render() {
  const { history } = this.props;
  return (
    <Router history={history}>
      <Route component={App}>
        <Route component={Layout}>
          <Route path='/' component={Workshops} />
          <Route path='/:slug' component={Workshop} />
        </Route>
      </Route>
    </Router>
  );
}

然后你还要更改App和Layout，这样他们就不会渲染固定的组件，而是渲染他们的孩子：

// App

render() {
    return (
        <DocumentTitle title='Workshop Booker'>
            <div className='App'>
                {this.props.children}
            </div>
        </DocumentTitle>
    );
}

// Layout

render() {
    return (
        <div className='Explore'>
                {this.props.children}
        </div>
    );
}

如果您需要在视图中呈现多个动态内容，则可以使用multiple components configuration。

react-router如何构建应用程序结构？

1 个答案: