Javascript React router：仅在现有视图上渲染新组件

我试图在两个页面之间切换，但在学习时遇到了许多问题

react router

在我的

App.js

中，有一个底部，单击该底部可将我导航到

Cart

  render()  {
    return (
      <div>
        <button type="button" className="btn btn-primary Bottom-right " onClick={(e) => this.handleSubmit(e)}>
              Confirmed Order
        </button>
        <button type="button" className="btn btn-Primary">
          <Link to="/displayCart" >Show Car</Link>
        </button>
      </div>
    );
  }
}

export default App;

My index.js包含两个组件，app js是默认组件

class Cart extends React.Component {
    constructor(props){
        super(props)

        this.state={
            cartData:null
        }
    }

    componentDidMount() {
        this.callApi()
          .then(res => this.setState({ cartData: res.express}))
          .catch(err => console.log(err));
      }

      callApi = async () => {
          const response = await fetch('/myCart');
          const body = await response.json();
          if (response.status !== 200) throw Error(body.message);

          return body;
      };

    render(){
        return(
            <div className="col">
            <div className="App">
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <h1 className="App-title">Welcome to Shopping Center</h1>
                </header>
            </div>
                <div>{ReactHtmlParser(this.state.cartData)}</div>
                <button type="button Bottom-right" className="btn btn-Primary">
                    <Link to="/" >Keep Shopping</Link>
                </button>
            </div>
        )
    }
}

    ReactDOM.render(
        <BrowserRouter>
            <switch>
                <div>
                    <Route exact path="/displayCart" component={Cart}/>
                    <Route component={App} />
                </div>
            </switch>
        </BrowserRouter>,
        document.getElementById('root')
    );

3：如果我在从购物车

组件
返回
应用程序
组件时更改了
应用程序
组件中的状态，则状态不会刷新。例如（例如，items中的布尔值“purchase”）。当我从购物车的App组件返回时，状态保持为true，相反，我希望它返回到初始状态

我遵循了教程，但它只是坏了。我做错了什么
所以警告是因为
设置状态
正在被
调用，即使在您返回应用程序之后，这意味着购物车组件已卸载

您应该跟踪
购物车
何时卸载

您可以通过在
购物车
组件中创建一个变量，例如
\u isMounted
，然后使用生命周期事件
组件将卸载
来跟踪

componentWillUnmount(){
   _isMounted =false
}

然后在使用setState之前，快速检查以确保
\u isMounted
为真

this.callApi()
          .then(res => if(isMounted){
                         this.setState({ cartData: res.express}))
                       }
          .catch(err => console.log(err));

显然，您还需要使用
ComponentDidMount
将
\isMounted
更改为true

这是一个


关于应用程序的状态不是“刷新”。。。这是因为当您从应用程序>购物车>应用程序时，应用程序组件从不卸载并再次装载

要解决此问题，请使用
精确路径=“/”

现在将此函数作为道具传递

    <BrowserRouter>
        <switch>
            <div>
                <Route exact 
                       path="/displayCart" 
                       render={
                         (props) => <Cart {...props} 
                         changeStateinApp={this.changeState} /> 
                       }
                  />
                <Route component={App} />
            </div>
        </switch>
    </BrowserRouter>,

好的，我消除了这个错误。新组件不能在完全新的视图上渲染的问题如何？我更新了我的答案。我个人总是使用组件作为基础空视图。然后一次渲染一个视图。我不想在应用程序tho中更改购物车的状态。这两个组件将从两个不同的URL获取。我不认为Cart.js只装载在eXiston上的原因是因为它。一旦Cart卸载（您返回应用程序），您就无法更改其状态。此外，应用程序无法访问购物车的状态。请查看其他用户问题的答案。
        <switch>
            <div>
                <Route exact path="/displayCart" component={Cart}/>
                <Route exact path="/" component={App} />
            </div>
        </switch>

changeState(key, value){
   this.setState({
      key : value
   }
}

    <BrowserRouter>
        <switch>
            <div>
                <Route exact 
                       path="/displayCart" 
                       render={
                         (props) => <Cart {...props} 
                         changeStateinApp={this.changeState} /> 
                       }
                  />
                <Route component={App} />
            </div>
        </switch>
    </BrowserRouter>,

this.callApi()
          .then(res => 
              this.props.changeStateinApp(cartData, res.express)
          .catch(err => console.log(err));