How to use react-router-dom - 10 common examples

const InstrumentBuildQuestionItems = (props) => {
  let history = useHistory();

  const dispatch = useDispatch()
  const classes = useStyles();
  const questionItemId = get(props, "match.params.questionItemId", null);

  const instrumentId = get(props, "match.params.instrument_id", "")
  const questionItems = useSelector(state => get(state.questionItems, instrumentId, {}));
  const selectedQuestion = get(questionItems, questionItemId, {used_by: []})

  useEffect(() => {
    dispatch(QuestionItems.all(instrumentId));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  },[]);

  const QuestionItem = (props) => {
    const {label, value, id} = props

const QuestionImporter = () => {
  const { quizId } = useParams();
  const history = useHistory();

  const [questionIds, setQuestionIds] = useState([]);
  const [isSaving, setIsSaving] = useState(false);

  const { loading, error, data } = useQuery(QUIZ_QUERY, { variables: { id: quizId } });
  const [importQuestionsMutation] = useMutation(IMPORT_QUESTIONS);

  const importQuestions = async () => {
    setIsSaving(true);
    try {
      // Send the mutation
      const result = await importQuestionsMutation({
        variables: { quizId, questionIds },
      });
      // Handle errors
      if (result.errors && result.errors.length > 0) {

public componentDidUpdate(prevProps: IProps) {
        const text = matchPath(
            this.props.location.pathname, routes["/library/search/text"],
        ).params.value;
        const prevText = matchPath(
            prevProps.location.pathname, routes["/library/search/text"],
        ).params.value;

        if (text !== prevText) {
            // Refresh searched pubs
            this.searchPublications();
        }
    }

const Analytics: React.FC = () => {
  const location = useLocation();

  /**
   * Track each navigation to a page.
   */
  useEffect(() => {
    ReactGA.set({ page: location.pathname });
    ReactGA.pageview(location.pathname);
  }, [location.pathname]);

  // don't actually render anything
  return null;
};

export function useURLState(
  paramToWatch: string,
  defaultValue: T,
  toUrlConverter: (data: T) => string = JSON.stringify,
  fromUrlConverter: (data: string) => T = JSON.parse
): [T, (T) => void] {
  const location = useLocation();
  const [paramValue, setParamValue] = useState(defaultValue);

  const changeParam = (value) => {
    // No change, don't do anything
    if (value === paramValue) {
      return;
    }

    setParamValue(value);

    // Change URL value
    const params = new URLSearchParams(
      // substr removes the hash tag at the beginning
      new URL(window.location.href).hash.substr(1)
    );
    const urlValue = toUrlConverter(value);

import * as React from 'react';
import * as Bootstrap from "react-bootstrap";
var Router = require("react-router-dom").BrowserRouter;
var Route = require("react-router-dom").Route;

// import './App.css';
// var Text = require('react-native-web').Text;

import { Header, FeatureSummary, Feature, View } from './Components';
import * as model from 'livedoc-model';

// const logo = require('./logo.svg');
const data: model.Feature[] = require('./livedoc.json');

const features: model.Feature[] = [];
data.forEach(featureData => {
  const feature = Object.assign(new model.Feature(), featureData);
  features.push(feature);
});

export const AppNavExpandable: React.FunctionComponent = ({
  title,
  to,
  items
}) => {
  const match = useRouteMatch({
    path: to
  })
  const isActive = !!match
  return (
    
      {items.map((item, j) => (
        // FIXME: each app-nav-item should have a fixed ID, using title? or j is just a dirty trick
        
      ))}
    
  )
}

const route = routes.find(r =>
		matchPath(path, _routeMatchOptions(r, matchedPath))
	); // take the first match

const _resolveRouteMatches = (
	routes: Array = [],
	path: string = '',
	matchedRoutes: Array = [],
	matchedPath: string = ''
): Promise> => {
	const route = routes.find(r =>
		matchPath(path, _routeMatchOptions(r, matchedPath))
	); // take the first match
	if (!route) {
		return Promise.resolve(matchedRoutes);
	}

	// add the route and its `match` object to the array of matched routes
	const currentMatchOptions = _routeMatchOptions(route, matchedPath);
	const match = matchPath(path, currentMatchOptions);
	if (!match) {
		// we know that this won't ever run because we've established the match in
		// `.find`, but this check is for type safety
		return Promise.resolve(matchedRoutes);
	}
	const matchedRoute = { route, match };
	const currentMatchedRoutes = [...matchedRoutes, matchedRoute];

	// add any nested route matches
	return resolveChildRoutes(matchedRoute).then(
		childRoutes =>
			childRoutes.length
				? _resolveRouteMatches(
						childRoutes,
						path,
						currentMatchedRoutes,

import * as Routing from 'react-router-dom';
export default Routing;
const userAgent = navigator.userAgent.toLowerCase();
let route = null;
if (userAgent.indexOf(' electron/') > -1) {
   // Electron hash router
    route = Routing.HashRouter; 
} else {
    route = Routing.BrowserRouter
}

export const Router = route;