Рендеринг нижнего колонтитула в зависимости от текущего URL Реакция - PullRequest
Новая
       4

Рендеринг нижнего колонтитула в зависимости от текущего URL Реакция

0 голосов
/ 22 марта 2020

Используя React, я пытаюсь частично показать нижний колонтитул при рендеринге указанной c страницы. Для всех остальных страниц должен быть показан весь нижний колонтитул.

Это мой код, но он работает только при обновлении страницы, а это не то, что мне нужно. Как я должен кодировать это, чтобы заставить это работать как ожидалось?

Правильно ли использовать window.location.href для этого случая? Подходит ли использование componentWillMount для этого случая?

Большое спасибо! Карлос 

class Footer extends Component {
    constructor() {
        super()
        this.state = {
            currentUrl: '',
        }
    }

    UNSAFE_componentWillMount() {
        this.setState({ currentUrl: window.location.href })
    }
    componentWillUnmount() {
        this.setState({ currentUrl: '' })
    }

    render() {
        const { currentUrl } = this.state

        return (
            <footer className="section-grid">
                {currentUrl !==
                `${url || url_beta}/jetzt-vorsorgen/vorsorge-planen` ? (
                    <RB.Container>
                        <RB.Row>
                            <RB.Col
                                md={{ span: 11, offset: 1 }}
                                lg={{ span: 6, offset: 0 }}
                            >
                                <RB.Row>
                                    <RB.Col md={6} lg={{ span: 12, offset: 0 }}>
                                        <p className="headline">Kunde werden</p>
                                        <Button
                                            elementType="Link"
                                            pathLink="/jetzt-vorsorgen"
                                            size="lg"
                                            block
                                            variant="light btn-footer"
                                        >
                                            <i className="fa fa-file-text-o" />{' '}
                                            Angebot einholen
                                        </Button>
                                        <Button
                                            className="demo demo-right"
                                            elementType="Link"
                                            pathLink="/demokonto"
                                            size="lg"
                                            variant="primary btn-footer"
                                        >
                                            Zum Demokonto{' '}
                                        </Button>
                                    </RB.Col>

                                    <RB.Col
                                        md={6}
                                        lg={{ span: 10, offset: 0 }}
                                        xl={{ span: 6, offset: 0 }}
                                    >
                                        <p className="headline">
                                            Newsletter anmelden
                                        </p>
                                        <NewsletterForm />
                                    </RB.Col>
                                </RB.Row>
                            </RB.Col>
                            <RB.Col
                                md={{ span: 11, offset: 1 }}
                                lg={{ span: 6, offset: 0 }}
                            >
                                <FooterMenuList />
                            </RB.Col>
                        </RB.Row>
                    </RB.Container>
                ) : null}

                <RB.Container className="cp">
                    <RB.Row>
                        <RB.Col
                            lg={{ span: 6, offset: 6 }}
                            md={{ span: 11, offset: 1 }}
                            xs={12}
                        >
                            <RB.Row as="ul">
                                <RB.Col as="li" sm={4}>
                                    <Link to="/datenschutz">
                                        Datenschutzerklärung
                                    </Link>
                                </RB.Col>
                                <RB.Col as="li" sm={4}>
                                    <Link to="/impressum">Impressum</Link>
                                </RB.Col>
                                <RB.Col as="li" sm={4}>
                                    <p>
                                       {new Date().getFullYear()}
                                    </p>
                                </RB.Col>
                            </RB.Row>
                        </RB.Col>
                    </RB.Row>
                </RB.Container>
            </footer>
        )
    }
}

export default Footer

1 Ответ

1 голос
/ 23 марта 2020

вам нужно установить react-router-dom пакет. Тогда вы можете управлять вещами, как показано ниже.

Если вы хотите получить доступ к реквизитам маршрута. вам нужно обернуть его в withRouter. Благодаря этому ваш компонент может получить доступ к реквизитам маршрутов 

import React from "react";
import { withRouter } from "react-router";

class ShowTheLocation extends React.Component {
  render() {
    const { match, location, history } = this.props;

    return <div>You are now at {location.pathname}</div>;
  }
}

// Create a new component that is "connected" (to borrow redux
// terminology) to the router.
export const Content = withRouter(ShowTheLocation);

Но я считаю, что в идеале вы хотите достичь чего-то подобного приведенному ниже. Вы можете иметь оператор switch и отображать компоненты внутри него. Итак, ниже у вас есть приложение. js с заявлением Switch. Я также импортировал компонент Footer с собственным оператором switch. 

import React from "react";
import { BrowserRouter, Switch, Route, Link } from "react-router-dom";
import { Content } from "./Content";
import { Footer } from "./Footer";

export class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/topics">Topics</Link>
            </li>
          </ul>

          <Switch>
            <Route path="/about">
              <div> About </div>
            </Route>
            <Route path="/topics">
              <div> Topic </div>
            </Route>
            <Route path="/">
              <div> Home </div>
            </Route>
          </Switch>
        </div>
        <Content />
        <Footer />
      </BrowserRouter>
    );
  }
}

Вы можете иметь несколько операторов switch в одноуровневых элементах 

import React from "react";
import { Switch, Route } from "react-router-dom";

export class Footer extends React.Component {
  render() {
    return (
      <Switch>
        <Route path="/about">
          <div> About Footer </div>
        </Route>
        <Route path="/topics">
          <div> Topic Tooter </div>
        </Route>
        <Route path="/">
          <div> Home Footer</div>
        </Route>
      </Switch>
    );
  }
}

Вот рабочий пример

...