Question

我正在尝试将React-Router实施到现有的反应应用程序中。

如何根据某些条件使用react-router显示组件。

var displayRHS;

if(this.state.displayEventComponent){
        {/*
         * Events Menus
         */}
        displayRHS = <DisplayEventComponent
            parentFunc={this.displayComponentFunction}
            parentPropDay={this.state.day}
        />
    } else if (this.state.displayToDoListComponent){
        {/*
          * To Do List Menu
          */}
        displayRHS = <DisplayToDoListComponent
            parentCallback_2={this.updateDisplayToDoListComponent}
            updateList={this.state.updateDisplayToDoListComponent}
            displayIssuesNotList={false}
        />

    } else if (this.state.displayIssuesComponent) {
        {/*
          * Issues menu
          */}
        displayRHS = <DisplayIssuesComponent
            parentCallback_2={this.updateDisplayToDoListComponent}
            updateList={this.state.updateDisplayToDoListComponent}
            displayIssuesNotList={true}
        />

    }

显示路线中断

<Route exact path="/" component={displayRHS} />

如何在传入各自的道具的情况下显示这些组件？

非常感谢提前

PS，我有点认为单个页面应该只是那个页面而且使用路由库应该是一个标志，你应该只是刷新一个页面..

Answer 1

单页应用程序称为“单页”，因为客户端仅从服务器端获取一个HTML页面。单页应用程序可以有多个“客户端页面”。

您正在迁移的应用程序使用某些条件，因为它没有路由器。在react-router中，条件匹配URL。

react路由器允许您导航到客户端页面。您将使用名为<Link>的组件导航到客户端页面。虚拟页面只是一个React组件。每条可用路线都需要定义Route。每个客户端页面都需要一个Route：

<Router>
    <Route exact path="/" component={LayoutComponent}>
       <IndexRoute component={ToDoPage} />
       <Route path="/events" component={EventsPage} />
       <Route path="/issues" component={IssuesPage} />
    <Route/>
</Router>

LayoutComponent将始终呈现：

class LayoutComponent extends React.Component {
    render() {
        return (
            <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/events">Events</Link></li>
                <li><Link to="/issues">Issues</Link></li>
            </ul>
           {this.props.children}
        );
    }
}

this.props.children的值将是与网址匹配的网页。因此，如果网址为/issues，则{this.props.children}中呈现的组件将为IssuesPage，因为我们是这样配置的：

<Route path="/issues" component={IssuesPage} />

然后，您的每个页面都可以呈现组件

ToDoPage：

class ToDoPage extends React.Component {

    constructor() {
        this.state = {
            updateDisplayToDoListComponent: []
        };
    }

    render() {
        return (
            <DisplayToDoListComponent
                parentCallback_2={this.updateDisplayToDoListComponent}
                updateList={this.state.updateDisplayToDoListComponent}
                displayIssuesNotList={false} />
        );
    }

    public updateDisplayToDoListComponent() {
        // do something
    }

}

EventsPage：

class EventsPage extends React.Component {

    constructor() {
        this.state = {
            day: 1
        };
    }

    render() {
        return (
            <DisplayEventComponent
                parentFunc={this.displayComponentFunction}
                parentPropDay={this.state.day} />
        );
    }

    public displayComponentFunction() {
        // do something
    }

}

IssuesPage：

class IssuesPage extends React.Component {

    constructor() {
        this.state = {
            updateDisplayToDoListComponent: []
        };
    }

    render() {
        return (
            <DisplayIssuesComponent
                parentCallback_2={this.updateDisplayToDoListComponent}
                updateList={this.state.updateDisplayToDoListComponent}
                displayIssuesNotList={true} />
        );
    }

    public updateDisplayToDoListComponent() {
        // do something
    }
}

这不是开箱即用的工具，你需要阅读react-router docs，但你应该有足够的细节来弄清楚如何让它工作。您也可以从"Getting Started with React Router"学习。

将路由器组件处理作为变量进行处理

1 个答案: