React – How to open PDF file as a href target blank

Place the pdf into a folder in /src. Import it like a component. Set href parameter as the imported pdf and the target = “_blank”. import React, { Component } from ‘react’; import Pdf from ‘../Documents/Document.pdf’; class Download extends Component { render() { return ( <div className = “App”> <a href = {Pdf} target = … Read more

How to use normal anchor links with react-router

The problem with anchor links is that react-router’s default is to use the hash in the URL to maintain state. Fortunately, you can swap out the default behaviour for something else, as per the Location documentation. In your case you’d probably want to try out “clean URLs” using the HistoryLocation object, which means react-router won’t … Read more

React-router v4 this.props.history.push(…) not working

So I came to this question hoping for an answer but to no avail. I have used const { history } = this.props; history.push(“/thePath”) In the same project and it worked as expected. Upon further experimentation and some comparing and contrasting, I realized that this code will not run if it is called within the … Read more

React Router V6 – Error: useRoutes() may be used only in the context of a component

You should have a <BrowserRouter> (or any of the provided routers) higher up in the tree. The reason for this is that the <BrowserRouter> provides a history context which is needed at the time the routes are created using useRoutes(). Note that higher up means that it can’t be in the <App> itself, but at … Read more

How to restrict access to routes in react-router?

Update (Aug 16, 2019) In react-router v4 and using React Hooks this looks a little different. Let’s start with your App.js. export default function App() { const [isAuthenticated, userHasAuthenticated] = useState(false); useEffect(() => { onLoad(); }, []); async function onLoad() { try { await Auth.currentSession(); userHasAuthenticated(true); } catch (e) { alert(e); } } return ( … Read more