React-router更新url但組件未加載

Question

我在React中有一個應用程序，我有一個要填充的小表單，然后當用戶單擊提交按鈕時，它應該將他完全帶到另一個頁面。 雖然我只設計了可視部分，並且在應用程序中沒有編寫任何功能，但我嘗試使用react-router v4.3.1設置路由器。 我是反應路由器的新手，我想要的是先前完全卸載的內容和要加載的新組件。 這是我的代碼。 在這里，我有我的App.js，其中包含我已設置路由器的Routing.js

class App extends Component {
  render() {
    return (
      <div className="App">
        <Routing />
        <Brand />
      </div>
    );
  }
}

這是Routing.js

const Routing = (props) => {
    return (<BrowserRouter>
        <Switch location={props.location}>
                <Route path="/" exact component={HomeJumbotron} />
                <Route path="/section1" component={SecondPage} />
        </Switch>
    </BrowserRouter>);
}

這里是HomeJumbotron，其中包含組件PaymentForm ，其中我有按鈕，當按下時，應該卸載HomeJumbotron並掛載SecondPage

class HomeJumbotron extends Component {
  render() {
    return (
      <Jumbotron className="main">
        <div className="container">
          <Header />
          <PaymentForm />
        </div>
      </Jumbotron>
    );
  }
}

class PaymentForm extends Component {
  handleValidSubmit(event) {
    event.preventDefault();
  }

  handleClick() {
    axios
      .get(
        "https://e27c15ee-bc16-4709-902a-783a1f517b79.mock.pstmn.io/demo?uId=001"
      )
      .then(response => console.log(response));
  }
  render() {
    return (
      <AvForm onValidSubmit={this.handleValidSubmit}>
        <Ref />
        <Amount />
        <BrowserRouter>
          <Link to="/section1">
            <div>
              <Button className="wide" onClick={this.handleClick.bind(this)}>
                Pay
              </Button>
            </div>
          </Link>
        </BrowserRouter>
      </AvForm>
    );
  }
}

現在發生的事情是，當我按下按鈕時，網址會發生變化，但新的組件未呈現，基本上沒有任何變化！ 現在有了這個，如果我刷新頁面，它工作，這是有道理的，因為網址已更新。 但我不能總是刷新頁面以使新的contnent顯示出來！ 我想我可能會阻止更新，但后來我沒有得到我必須通過的位置？ 我嘗試了很多東西，但沒有用。

Answer 1

您應該只在應用程序頂部有一個BrowserRouter組件，就像您已經擁有的那樣。 刪除Link周圍的Link ，它將按預期工作。

class PaymentForm extends Component {
  // ...

  render() {
    return (
      <AvForm onValidSubmit={this.handleValidSubmit}>
        <Ref />
        <Amount />
        <Link to="/section1">
          <div>
            <Button className="wide" onClick={this.handleClick.bind(this)}>
              Pay
            </Button>
          </div>
        </Link>
      </AvForm>
    );
  }
}