在Gatsby / React中动态更改URL

npm install gatsby react-router-dom

import React from "react";
import { Router } from "@reach/router";

const Home = () => <h1>首页</h1>;
const Blog = () => <h1>博客</h1>;
const Post = ({ id }) => <h1>文章 {id}</h1>;

const App = () => (
  <Router>
    <Home path="/" />
    <Blog path="/blog" />
    <Post path="/blog/post/:id" />
  </Router>
);

export default App;

module.exports = {
  plugins: ["gatsby-plugin-react-helmet", "gatsby-plugin-react-router"],
};

import React from "react";
import { Link } from "gatsby";

const Navigation = () => (
  <nav>
    <ul>
      <li>
        <Link to="/">首页</Link>
      </li>
      <li>
        <Link to="/blog">博客</Link>
      </li>
      <li>
        <Link to="/blog/post/1">文章 1</Link>
      </li>
    </ul>
  </nav>
);

export default Navigation;