Javascript React路由器-为什么交换机在路径更改时不更改html？

我正在开发一个web应用程序，我在使用reactJS路由器时遇到了一些问题。当我重定向到/sell路径时，/path中的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;

多谢各位

发行 您有多个路由器。内部路由器上下文正在处理链接，因此不会通知外部路由器

解决方案 仅使用一个路由器组件，移除链路周围的路由器。此外，在使用交换机时，路径顺序和特定性也很重要。您想在不太具体的路径之前对更具体的路径进行排序。/是所有路径的路径前缀，将在/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>
    );
  }
}

问题 您有多个路由器。内部路由器上下文正在处理链接，因此不会通知外部路由器

解决方案 仅使用一个路由器组件，移除链路周围的路由器。此外，在使用交换机时，路径顺序和特定性也很重要。您想在不太具体的路径之前对更具体的路径进行排序。/是所有路径的路径前缀，将在/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>
    );
  }
}

---

非常感谢。我没注意到！它仍然给我带来了问题，但当我听从你的建议，并在它开始工作时添加了确切的内容：@Pylot-Yup，你可以保留顺序并指定确切的道具，尽管我仍然建议在处理路线时记住顺序/特殊性。若问题得到解决，那个么我邀请你们也将这个答案标记为已接受，若你们觉得有帮助，别忘了投票。干杯。@DrewReese对不起，我已经记录了今晚的比赛。标记正确：谢谢！我没注意到！它仍然给我带来了问题，但当我听从你的建议，并在它开始工作时添加了确切的内容：@Pylot-Yup，你可以保留顺序并指定确切的道具，尽管我仍然建议在处理路线时记住顺序/特殊性。若问题得到解决，那个么我邀请你们也将这个答案标记为已接受，若你们觉得有帮助，别忘了投票。干杯。@DrewReese对不起，我已经记录了今晚的比赛。其标记正确：