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

Question

我还在搜索说明如何为以下场景构建结构的教程

在应用启动时/我有所有列出的项目
点击特定项目重定向到新路线 /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>
        );
    }
}

我一直在关注这个 example，主要是我的结构遵循背后的想法，但问题是所有继承的组件都被扭曲为子组件。如何生成打开新视图的结构？

但是

Answer 1

如果您不想将一个视图包裹在另一个视图中，则不要将视图嵌套在组件或路由设置中。路由配置可能如下所示：

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 如何构建应用程序结构？

react-router how to build app structure?

reactjs

react-router