javascript - 根据当前 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

标签： javascriptreactjsrouterconditional-operator

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。我还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>
    );
  }
}

这是一个工作示例