如何使用 React Router 5 模拟 window.location？

Question

I have a react SPA that is served by Laravel.. I want the SPA to be able to go to some pages that are also served by Laravel..

Update:

As an example... in my coreui-react based app.. I want to allow the user to open the user manual which is built using vuepress. I want to be able to open it in a brand new page and not have it bundled into the SPA. The SPA shows up at https://test.local/ the user manual is at https://test.local/docs

Link to="/docs" flicks me back to the SPA, Link to="//test.local/docs" also as does

I've also tried placing onClick={() => window.location = window.location.protocol + "//" + window.location.hostname + "/docs"} inside the Link but no change except that it does drop out of the local dev server (port 3000).. but if its in a build - then it still gets caught by the ReactRouter

There is a suggestion that StaticRouter would do it - but all the examples I see refer to server side rendering of content that the SPA will consume, not flicking you out to a server delivered page..

I'm kinda at my wits end.. my only thought at the moment is to move the SPA from "/" to "/app" and and not handle "/" at all within the SPA with the hope that ReactRouter might let that through

This seems to be a long term issue in ReactRouter.. but in the past you could brute-force your way out with <a href or window.location - but seems no longer to be the case..

Answer 1

If I understand correctly, you can use "history":

const history = useHistory();

you have to import useHistory from react-router-dom :

import { useHistory } from 'react-router-dom'

and then you can use:

history.push('/analytics')