7. React Router

我们先来说说「Router」，大概的意思就是：「就是通过互联的网络把信息从源地址传输到目的地址的活动」。

我们用一个注册&登录的页面例子来说明。

function App() {
  let path = window.location.hash;
  let initialState = path === "#signUp" ? "signUp" : "signIn";
  let [n, setN] = useState(initialState);

  let onClickSignIn = () => {
    setN("signIn");
    window.location.hash = "signIn";
  };

  let onClickSignUp = () => {
    setN("signUp");
    window.location.hash = "signUp";
  };

  return (
    <div className="App">
      <div className="tab">
        <button onClick={onClickSignIn}>登录</button>
        <button onClick={onClickSignUp}>注册</button>
      </div>
      {n === "signIn" ? <SignInBox /> : <SignUpBox />}
    </div>
  );
}

我们一开始用hash来区分「登录」和「注册」页面。上述代码中，点击按钮还会修改网址，最后会多出「/#signUp」或者「/#signIn」。

那有人问：能不能地址末尾变成「/signUp」或者「/signIn」？

也可以，就是把「window.location.hash」改为「window.location.pathname」, 修改后你会发现一个「神奇现象」，就是「整个页面都刷新了」，因为浏览器以为你修改路径，是要跳转页面。

还有一种就是假装改了路径（不会刷新页面），就是「window.history.putState(obj, 'page 2', 'page2.html')」。

不过也存在一个问题，就是可能会报错，因为当前页面不存在。

image.png

那路由很多了怎么办？不可能一直反复「if...else」吧。接下来就是我们的主角「React Router」了。

「React Router 就是为了保持 UI 与 URL 同步」。

function SignInBox() {
  return <div className="box">登录！</div>;
}

function SignUpBox() {
  return <div className="box">注册！</div>;
}

function Welcome() {
  return <div className="box">欢迎！</div>;
}

function App() {
  return (
    <div className="box">App</div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <Router>
    <div className="App">
      <div className="tab">
        <Link to="/signUp">
          <button>注册！</button>
        </Link>
        <Link to="/signIn">
          <button>登录！</button>
        </Link>
        <Link to="/welcome">
          <button>欢迎！</button>
        </Link>
      </div>
      <Route exact path="/" component={App} />
      <Route exact path="/signIn" component={SignInBox} />
      <Route exact path="/signUp" component={SignUpBox} />
      <Route exact path="/welcome" component={Welcome} />
    </div>
  </Router>
  , rootElement);

运用「Router」包在最外层，「Route」中的path属性来判断路径和对应的组件。「Link」可以导向所在路径。