Archives : December-2018

When I use a <Link /> component, navigation happens smoothly without page refresh, but when I try to navigate through history.push() (i.e. on form submission), the page refreshes. How do I prevent history.push() from doing a refresh? Here’s my code: import React from ‘react’; import {withRouter} from ‘react-router-dom’; import qs from ‘query-string’; class SearchBox extends ..

Read more

I am using react-router-hash-link to go to a different section within the same route: import { HashLink as Link } from “react-router-hash-link”; In the render: render() { <Link smooth to=”#header2″> Scroll to header 2 section </Link> <h2 id=”header2″></h2> } This works. However, if I’m coming from a different route and link to another route with ..

Read more

I am currently build a django-react web apps, i wondering how do i handle my 404 error on react-router and not with django side, this is my code which 404 error will be routed on django server side… urlpatterns = [ path(‘admin/’, admin.site.urls), re_path(r’^api/’, include(urls)), ] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) if settings.DEBUG: urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) ..

Read more

I have a dynamic route set up in my react application, when a user clicks the image it navigates to a new route with url /details/:id: <div className=’App’> <Switch> <Route path=’/’ exact component={Home} /> <Route exact path=’/details/:id’ component={ItemDetails} /> </Switch> </div> It comes from my functional component: const headerImages = (props) => { const imageResults ..

Read more

Here’s a working code: const AppRouter = () => ( <BrowserRouter> <div> <Header /> <Switch> <Route path=”/” component={DashboardPage} exact={true} /> <Route path=”/:id” component={ViewerPage} /> // <– Exclude Header component from this page <Route path=”/create” component={CreatePage} /> <Route path=”/edit/:id” component={EditPage} /> <Route path=”/help” component={HelpPage} /> <Route component={NotFoundPage} /> </Switch> </div> </BrowserRouter> ); export default AppRouter; I ..

Read more

https://reacttraining.com/react-router/web/guides/testing The react-router testing documentation is bit obscure to me. How to write a test to check a route is rendered A Component. – APage.js import React, { Component } from ‘react’ export default class APage extends Component { render() { return ( <div> A Page </div> ) } } Writing a unit test to ..

Read more

I have this issue: I have a simple routing technique wrapped inside redux, like this: <Provider store={store}> <Router> <React.Fragment> <Route exact path=”/” component={App} /> <Route path=”/about” component={About} /> </React.Fragment> </Router> </Provider> And I have a simple Link in my App component like this <Link to=”/about”>About</Link> when I navigate to About by clicking the Link, everything ..

Read more