react-router

historyApiFallback doesn’t work in Webpack dev server

by

I meet the same question today. let config in webpack.config.js: output.publicPath be equal to devServer.historyApiFallback.index and point out html file route。my webpack-dev-server version is 1.10.1 and work well. http://webpack.github.io/docs/webpack-dev-server.html#the-historyapifallback-option doesn’t work, you must point out html file route. for example module.exports = { entry: “./src/app/index.js”, output: { path: path.resolve(__dirname, ‘build’), publicPath: ‘build’, filename: ‘bundle-main.js’ }, … Read more

How to know if react-router can go back to display back button in react app

by

You can check location.key if you have a location key that means you routed in-app. But if you don’t that means you come from outside of the app or you just open the app in a new tab etc. import { useHistory, useLocation } from “react-router-dom”; const history = useHistory(); const location = useLocation(); <Button … Read more

Server side rendering with react, react-router, and express

by

So, I ended up solving this one myself. The error I was getting was from an un-rendered nested component, which is why the js engine was complaining about a random < char. And now to my express setup. For those who aren’t aware of how react can be used with server-side rendering, it’s fairly straightforward: … Read more

Mocking react-router-dom hooks using jest is not working

by

This works for me to mock useParams and change values for each unit test within the same file: import React from “react”; import { render } from “@testing-library/react”; import Router from “react-router-dom”; import Component from “./Component”; jest.mock(“react-router-dom”, () => ({ …jest.requireActual(“react-router-dom”), useParams: jest.fn(), })); const createWrapper = () => { return render(<Cases />); }; describe(“Component … Read more

Testing react component enclosed in withRouter (preferably using jest/enzyme)

by

Normally if we try to test such components we won’t be able to render it as it is wrapped within WithRouter (WithRouter is a wrapper over a component which provides Router props like match, route and history to be directly used within the component). module.exports = withRouter(ManageProfilePage); To render such components, we have to explicitly … Read more

react-router v6: Navigate to a URL with searchParams

by

Update It’s no longer necessary to prepend ? to search (as of ~September 2021): import { createSearchParams, useNavigate } from “react-router-dom”; … const navigate = useNavigate(); navigate({ pathname: “listing”, search: createSearchParams({ foo: “bar” }).toString() }); This isn’t quite as simplified as I’d like, but I think it’s the closest we can get currently. navigate does … Read more

react routing and django url conflict

by

The issue is probably that you haven’t configured your URLs to handle the routes that are defined in React Router. In your Django urls.py you should be using a catch all to match all URLs to your index template urlpatterns += [ # match the root url(r’^$’, base_view), # match all other pages url(r’^(?:.*)/?$’, base_view), … Read more

Using Jest to test a Link from react-router v4

by

You can wrap your component in the test with the StaticRouter to get the router context into your component: import React from ‘react’; import renderer from ‘react-test-renderer’; import { Link } from ‘react-router-dom’; import { StaticRouter } from ‘react-router’ test(‘Link matches snapshot’, () => { const component = renderer.create( <StaticRouter location=”someLocation” context={context}> <Link to=”#” /> … Read more