如何使用 react-router-dom 从模式窗口更新页面上的内容

Question

有一个模态窗口，通过单击特殊按钮添加到页面上，并通过单击关闭按钮从页面中完全删除。我试图在模态窗口内添加一个<Link/>，但它不起作用，因为我无法在 App.js 的主 <Switch/> 中添加一个模态窗口组件（因为模态窗口组件是“抽象”）。我尝试使用withRouter，但它只更改了 URL 而没有更新页面。那么我应该如何进行导航呢？我只是在学习和制作我的第一个 SPA 练习。所以提前谢谢。

app.js

function App() {
    useEffect(main);

    return (
        <div className="wrapper">
            <Router>
                <Navbar/>
                <Switch>
                    <Route path="/:id" exact component={Category}></Route>
                    <Route path="/product/:id" exact component={Product}></Route>
                    <Route path="/booking/:uuid" component={Order}></Route> //the link shoul be to the Order component
                </Switch>
            </Router>
            <div className="footer black">
                footer
            </div>
        </div>
    );
}

export default App;

链接应该在哪里有问题的组件

function CartBottomMenu(props){
    const storage = props.Storage; //does'not matter
    const price = cartCountPriceUpdate();  //does'not matter

    const OrderBtn = withRouter(({history})=> (
        <div className="checkout-btn" id="checkout">
            <div className="default-btn" onClick={()=> history.push('/booking/1')}>Оформить заказ</div>
        </div>
    ))

    useEffect(()=>document.body.querySelector('#total-price').innerHTML = price); //does'not matter

    return(
        <div className="cart-bottom-menu">
            <div className="total-price" id="final-cart-price">
                <span className="total-price-title">Итого:</span>
                <span className="total-price-span">{price}</span>
            </div>
            <Router> //this Router tag here just for pretty, i know it's not needed here
                <OrderBtn/> //the button with a link
            </Router>
        </div>
    )
}

模态窗口通过传递给事件处理程序的此函数添加到文档中。 首先它会在页面上附加一个“容器”，然后在其中呈现一个 Modal 组件。

export function RenderModal(Modal, ...args){
    return function(){
        if(document.querySelector('#modal')) return;

        let modal = document.createElement('div');
        modal.classList.add(...args);
        modal.id = 'modal';
        document.body.append(modal);
        ReactDOM.render(<Modal/>, modal)
   }
}

类似的东西。 CartModal 是模态的主要组件。

document.body.querySelector('#cart').addEventListener('click', RenderModal(CartModal, 'modal-window'));

Сlicking关闭按钮触发功能，完全从页面中删除模式。

function closeModalWindow(window){
    window.parentNode.removeChild(window);
}

也许这不是最好的方法，但我想到的唯一方法

Answer 1

很明显，包裹嵌套组件的附加路由器阻碍了链接到与任何外部Router 组件一起使用。

function CartBottomMenu(props){
    ...

    return(
        <div className="cart-bottom-menu">
            <div className="total-price" id="final-cart-price">
                <span className="total-price-title">Итого:</span>
                <span className="total-price-span">{price}</span>
            </div>
            <Router> // <-- this router
                <OrderBtn/> //the button with a link
            </Router>
        </div>
    )
}

删除所有嵌套的Router 组件，以便包装应用程序的最外层为所有组件提供相同的路由上下文。

此外，无需在每次渲染时重新声明 OrderBtn，只需使用 useHistory 挂钩即可访问 history 对象。

function CartBottomMenu(props) {
  const history = useHistory();

  ... // you say doesn't matter

  return(
    <div className="cart-bottom-menu">
      <div className="total-price" id="final-cart-price">
        <span className="total-price-title">Итого:</span>
        <span className="total-price-span">{price}</span>
      </div>
      <div className="checkout-btn" id="checkout">
        <div
          className="default-btn"
          onClick={()=> history.push('/booking/1')}
          role="button" // <-- don't forget appropriate aria role!!
        >
          Оформить заказ
        </div>
      </div>
    </div>
  )
}