Question

我想在每次路径（url）改变时改变渲染的组件位置例如我有3个街区：Home，Works，Contacts。当url是site.com/home时，内容会在Home块中呈现，当url是site.com/works时，内容会移动到Works块等等。

我做了一个我想要的东西，但它渲染了整个页面，只是移动新内容似乎更优化所以你能提出更好的决定吗？
您可以从此处获取并在本地运行的整个项目：https://github.com/g1un/reactjs-site
您可以在此处看到它的外观（有关路由的错误）：http://g1un.ru/reactjs/
我粘贴下面的主要文件。

index.js

import React from 'react';
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import style from './../scss/style.scss';

import { Header } from './components/Header';
import { About } from './components/About';
import { Works } from './components/Works';
import { Contacts } from './components/Contacts';
import { NotFound } from './components/NotFound';

class App extends React.Component {
render() {
    return (
        <Router>
            <div className="container">
                <Switch>
                    <Route exact path="/" component={About}/>
                    <Route exact path="/works" component={Works}/>
                    <Route exact path="/contacts" component={Contacts}/>
                    <Route component={NotFound}/>
                </Switch>
            </div>
        </Router>
    );
}
}

render(<App />, window.document.getElementById('app'));

About.js（Works.js，Contacts.js类似）

import React from 'react';
import DocumentTitle from 'react-document-title';

import { Header } from './Header';

export class About extends React.Component {
render() {
    return (
        <DocumentTitle title='About'>
            <Header currentPath={this.props.location.pathname}>
                <h1>
                    About
                </h1>
            </Header>
        </DocumentTitle>
    );
}
}

的 Header.js

import React from 'react';

const PATHS = ['/', '/works', '/contacts'];
const PAGES = ['About', 'Works', 'Contacts'];

import { HeaderItem } from './HeaderItem';

export class Header extends React.Component {
    constructor(props) {
        super();
        this.currentPath = props.currentPath;
        this.content = props.children;
        this.paths = PATHS;
        this.pages = PAGES;
    }

    render() {
        return (
            <header className="header">
                <nav className="nav">
                    <div className="nav__list">
                        {this.paths.map((path, i) => {
                            return <HeaderItem key={i} currentPath={path} currentPage={this.pages[i]} pageContent={path === this.currentPath ? this.content : ''}/>;
                        })}
                    </div>
                </nav>
            </header>
        );
    }
}

的 HeaderItem.js

import React from 'react';
import { NavLink } from 'react-router-dom';

export class HeaderItem extends React.Component {
    render() {
        return (
            <div className={"nav__item " + (this.props.pageContent ? "_active" : "")}>
                <NavLink className="nav__link" exact activeClassName="_active" to={this.props.currentPath}>
                    {this.props.currentPage}
                </NavLink>
                {this.props.pageContent ? <div className="nav__content content">{this.props.pageContent}</div> : ''}
            </div>
        );
    }
}

Answer 1

我自己找到了这个决定事实是我无法使用echo "start" export abc="hello" a=$(python -c "import os ; print os.getenv('abc') * 2") echo $a echo "end"中的任何块，所以我只使用<Switch/>而没有<Route>，将它们放在我需要的任何块中。<登记/> 对于“404＆＃39;页面I已创建<Switch/>块内部具有相同路径但没有组件属性，除了一个用于＆＃39; 404＆＃39;页面。
现在，在每个HeaderItem中，我可以控制其内容是否可见。

新index.js：

<Switch/>

New HeaderItem.js：

import React from 'react';
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import DocumentTitle from 'react-document-title';

import style from './../scss/style.scss';

import { Header } from './components/Header';
import { HeaderItem } from './components/HeaderItem';
import { About } from './components/About';
import { Works } from './components/Works';
import { Contacts } from './components/Contacts';
import { NotFound } from './components/NotFound';

const PATHS = ['/', '/works', '/contacts'];
const PAGES = ['About', 'Works', 'Contacts'];
const COMPONENTS = [About, Works, Contacts];

class App extends React.Component {
    constructor() {
        super();
        this.paths = PATHS;
        this.pages = PAGES;
        this.components = COMPONENTS;
        this.state = {
            documentTitle: this.getDocumentTitle()
        };
    }

    updateDocumentTitle(pageTitle) {
        if(this.state.documentTitle === pageTitle) return;
        this.setState({
            documentTitle: this.getDocumentTitle()
        });
    }

    getDocumentTitle() {
        let pathIndex = this.paths.indexOf(window.location.pathname);
        if(pathIndex === -1) {
            return 'Not found';
        } else {
            return this.pages[pathIndex];
        }
    }

    render() {
        return (
            <DocumentTitle title={this.state.documentTitle}>
                <Router>
                    <div className="container">
                        <Switch>
                            {this.paths.map((path, i) => {
                                return <Route key={i} exact path={path}/>;
                            })}
                            <Route render={() => <NotFound text="Error 404"/>}/>
                        </Switch>
                        <Header>
                            {this.paths.map((path, i) => {
                                return (
                                    <HeaderItem
                                        key={i}
                                        routePath={path}
                                        pageTitle={this.pages[i]}
                                        updateDocumentTitle={this.updateDocumentTitle.bind(this)}
                                    >
                                        <Route exact path={path} component={this.components[i]}/>
                                    </HeaderItem>
                                );
                            })}
                        </Header>
                        <Switch>
                            {this.paths.map((path, i) => {
                                return <Route key={i} exact path={path}/>;
                            })}
                            <Route render={() => <NotFound text="Page not found"/>}/>
                        </Switch>
                    </div>
                </Router>
            </DocumentTitle>
        );
    }
}

render(<App />, window.document.getElementById('app'));

更改每个路线更改的组件位置

1 个答案: