React Router - 为什么当路径改变时开关不改变html？

Question

我正在开发一个网络应用程序，但我遇到了 reactJS 路由器 的一些问题。当我重定向到 /sell 路径时，HTML 形式的 / 路径会保留，而 /sell 路径内的 HTML 不会加载。

我做错了吗？谁能指出我正确的方向？

import React, { Component } from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Helmet from "react-helmet";

import CreateList from "./CreateList";
//https://colorhunt.co/palette/33990
//https://colorhunt.co/palette/66990
class Home extends Component {
    constructor(props) {
        super(props);
        this.state = { appTitle: "better craigslist"};
    }

    render() {
        return (
            <React.Fragment>
                <Helmet>
                    <title>{this.state.appTitle}</title>
                </Helmet>
                <Router>
                    <Switch>
                        <Route path="/">
                            <div id="header-text">
                                <h1 className="center-align">
                                    <b>Sellify</b>
                                </h1>
                                <h5 className="center-align">
                                    Need to get rid of your stuff? create a listing and sell it here! <br /> Looking for something? Check if its on selify!
                                </h5>
                            </div>
                            <div className="col s12 center">
                                <Router>
                                    <Link to="/sell">
                                        <button className="btn" id="create-listing-button">
                                            Create Listing
                                        </button>
                                    </Link>
                                </Router>
                            </div>
                        </Route>
                        <Route path="/sell">
                            <h1>Test</h1>
                        </Route>
                    </Switch>
                </Router>
            </React.Fragment>
        );
    }
}


export default Home;

非常感谢！

Answer 1

问题

您拥有多个Router。内部Router 上下文正在处理链接，因此外部Router 不会收到通知。

解决方案

只使用一个Router 组件，去掉Link 周围的Router。此外，当使用Switch 时，路径顺序和特异性很重要。您想在不太具体的路径之前对更具体的路径进行排序。 “/”是所有路径的路径前缀，将在“/sell”之前匹配和呈现。

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = { appTitle: "better craigslist" };
  }

  render() {
    return (
      <React.Fragment>
        <Helmet>
          <title>{this.state.appTitle}</title>
        </Helmet>
        <Router>
          <Switch>
            <Route path="/sell">
              <h1>Test</h1>
            </Route>
            <Route path="/">
              ...
              <div className="col s12 center">
                <Link to="/sell">
                  <button className="btn" id="create-listing-button">
                    Create Listing
                  </button>
                </Link>
              </div>
            </Route>
          </Switch>
        </Router>
      </React.Fragment>
    );
  }
}