呈现页脚，取决于当前URL React

Question

使用React，在呈现特定页面时，我试图部分显示页脚。对于所有其他页面，应显示整个页脚。

这是我的代码，但是仅当刷新页面时才有效，这不是我所需要的。我应该如何编码以使其按预期工作？

在这种情况下，使用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

Answer 1

您需要安装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语句并在其中呈现组件。因此，下面有带Switch语句的App.js。我还用自己的switch语句导入了Footer组件。

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>
    );
  }
}

这里是working example