javascript - React-router 更新 url 但组件未加载

Question

我在 React 中有一个应用程序，其中有一个要填写的小表单，然后当用户单击提交按钮时，它应该将他完全带到另一个页面。虽然我只设计了视觉部分并且没有在应用程序中编程任何功能，但我尝试使用 react-router v4.3.1 设置路由器。我是react-router的新手，我想要的是完全卸载之前的内容并加载一个新的组件。这是我的代码。这里我有我的 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>
    );
  }
}

现在发生的事情是，当我按下按钮时，url 发生了变化，但新组件没有呈现，基本上没有任何变化!现在，如果我刷新页面，它就可以工作，这是有道理的，因为 url 已经更新。但是我不能总是刷新页面以使新内容显示出来!我想我可能会阻止更新，但我无法到达必须通过该位置的位置？我尝试了很多东西，但都没有用。

Answer 1

您的应用程序顶部应该只有一个 BrowserRouter 组件，就像您已经拥有的那样。删除 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>
    );
  }
}