URL更改时反应更新组件

Question

我正在研究React组件，每次URL更改时都需要对其进行更新。这是我要尝试的生命周期。

• 检查网址
• 如果当前状态不是当前网址，则更新状态
• 渲染组件
• 网址更改
• 检查网址
• 如果当前状态不是当前网址，则更新状态
• 更新组件
• 网址更改 =检查网址
• 等...

我认为我需要使用getDerivedStateFromProps（）作为“检查URL，更新状态”，需要在初始呈现之前和每次更新之前运行。

我应该如何使用React 16达到这个生命周期？以及如何定位网址？ window.href.location导致错误消息“ href未定义。”

下面的组件代码（目前尚无道具）。

import '../styles/App.css';
import '../styles/normalize.css';
import { Link } from 'react-router-dom';

class Header extends React.Component {

    constructor(props) {
        super();
        this.state = {
            url: "/"
        }
    }



    render() {
        let toRender = (<header><p>Hey, if you can see me in the browser, something broke.</p></header>)
        if (this.state.url === "/") {
            toRender = <header>
                <Link to="/">
                    <div id="ajessen-logo">
                        <img src={require('../assets/logo-raw.png')} alt="Ajessen Logo" />
                    </div>
                </Link>
                <nav>
                    <ul>
                        <Link to="/">
                            <li class="nav-current">Home</li>
                        </Link>
                        <Link to="/services">
                            <li>Services and Skills</li>
                        </Link>
                        <Link to="/projects">
                            <li>Projects</li>
                        </Link>
                        <Link to="/about">
                            <li>About Me</li>
                        </Link>
                        <Link to="/contact">
                            <li>Contact Me</li>
                        </Link>
                    </ul>
                </nav>
            </header>
        }
        else if (this.state.url === "/services") {
            toRender = <header>
                <Link to="/">
                    <div id="ajessen-logo">
                        <img src={require('../assets/logo-raw.png')} alt="Ajessen Logo" />
                    </div>
                </Link>
                <nav>
                    <ul>
                        <Link to="/">
                            <li>Home</li>
                        </Link>
                        <Link to="/services">
                            <li class="nav-current">Services and Skills</li>
                        </Link>
                        <Link to="/projects">
                            <li>Projects</li>
                        </Link>
                        <Link to="/about">
                            <li>About Me</li>
                        </Link>
                        <Link to="/contact">
                            <li>Contact Me</li>
                        </Link>
                    </ul>
                </nav>
            </header>
        }
        else if (this.state.url === "/projects") {
            toRender = <header>
                <Link to="/">
                    <div id="ajessen-logo">
                        <img src={require('../assets/logo-raw.png')} alt="Ajessen Logo" />
                    </div>
                </Link>
                <nav>
                    <ul>
                        <Link to="/">
                            <li>Home</li>
                        </Link>
                        <Link to="/services">
                            <li>Services and Skills</li>
                        </Link>
                        <Link to="/projects">
                            <li class="nav-current">Projects</li>
                        </Link>
                        <Link to="/about">
                            <li>About Me</li>
                        </Link>
                        <Link to="/contact">
                            <li>Contact Me</li>
                        </Link>
                    </ul>
                </nav>
            </header>
        }
        else if (this.state.url === "/about") {
            toRender = <header>
                <Link to="/">
                    <div id="ajessen-logo">
                        <img src={require('../assets/logo-raw.png')} alt="Ajessen Logo" />
                    </div>
                </Link>
                <nav>
                    <ul>
                        <Link to="/">
                            <li>Home</li>
                        </Link>
                        <Link to="/services">
                            <li>Services and Skills</li>
                        </Link>
                        <Link to="/projects">
                            <li>Projects</li>
                        </Link>
                        <Link to="/about">
                            <li class="nav-current">About Me</li>
                        </Link>
                        <Link to="/contact">
                            <li>Contact Me</li>
                        </Link>
                    </ul>
                </nav>
            </header>
        }
        else if (this.state.url === "/contact") {
            toRender = <header>
                <Link to="/">
                    <div id="ajessen-logo">
                        <img src={require('../assets/logo-raw.png')} alt="Ajessen Logo" />
                    </div>
                </Link>
                <nav>
                    <ul>
                        <Link to="/">
                            <li>Home</li>
                        </Link>
                        <Link to="/services">
                            <li>Services and Skills</li>
                        </Link>
                        <Link to="/projects">
                            <li>Projects</li>
                        </Link>
                        <Link to="/about">
                            <li>About Me</li>
                        </Link>
                        <Link to="/contact">
                            <li class="nav-current">Contact Me</li>
                        </Link>
                    </ul>
                </nav>
            </header>
        }
        else {
            toRender = <header>
                <Link to="/">
                    <div id="ajessen-logo">
                        <img src={require('../assets/logo-raw.png')} alt="Ajessen Logo" />
                    </div>
                </Link>
                <nav>
                    <ul>
                        <Link to="/">
                            <li>Home</li>
                        </Link>
                        <Link to="/services">
                            <li>Services and Skills</li>
                        </Link>
                        <Link to="/projects">
                            <li>Projects</li>
                        </Link>
                        <Link to="/about">
                            <li>About Me</li>
                        </Link>
                        <Link to="/contact">
                            <li>Contact Me</li>
                        </Link>
                    </ul>
                </nav>
            </header>
        }
        return (toRender)
    }
}

export default Header