根据当前 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 语句并在其中呈现组件。所以在下面你有 App.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>
    );
  }
}

这里是working example

根据当前 URL React 渲染页脚

Rendering Footer depending of current URL React

javascript

router

conditional-operator

reactjs