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
From my experience it can be good to define a layout component for your page, something like… Layout Component render() { return( <div> <Header /> { this.props.children } /* anything else you want to appear on every page that uses this layout */ <Footer /> </div> ); } You then import layout into each of … Read more
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
Do not store the token in localStorage, the token can be compromised using xss attack. I think the best solution will be to provide both access token and refresh token to the client on login action. save the access token in memory (e.g redux state) and the refresh token should be created on the server … Read more
You can also use the: import { withRouter } from ‘react-router-dom’; And then on your export default, you do like this: export default withRouter(connect(mapStateToProps, {})(Layout)); Because when you have an export connect, you need to tell that that component will be using the router.
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
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
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
Edit: The proper way of doing this the way described in Catalina Astengo’s answer as it uses the real router functionality with just the history/routing state mocked rather than mocking the entire hook. The way I ended up solving it was by mocking the hooks in my tests using jest.mock: // TeamPage.test.js jest.mock(‘react-router-dom’, () => … Read more
Try this approach import { useNavigate } from ‘react-router-dom’; function YourApp() { const navigate = useNavigate(); return ( <> <button onClick={() => navigate(-1)}>go back</button> </> ); }