react router routing with parameter id

See also questions close to this topic

• RXJS Barcode scanner

  I am trying to listen to barcode events from Javascript (Angular). My requirement is that it should not be an input (so it should not have to be focused all the time) and my RXJS stream should emit once per scan and exclude regular keyboard strokes.
• Vuetify - Custom data table - Potential infinite loop: exceeded 10001 iterations

  As the default Vuetify v-data-table component doesn't have a numbered pagination and select page dropdown built-in, I decided to make my own wrapper component, genericTable.vue.

  Everything is looking the way I want. However, I encounter the following issue:

  

  Note: I want the genericTable component to be a dumb component, meaning it accepts props and emits events to allow them to be dynamic and reusable. As soon as a user selects a page or changes the items per page, an event is emitted from the genericTable component to the parent component.

  Sandbox

  https://codesandbox.io/s/mutable-frog-rb2v8

  Snippet

  // genericTable.vue
  
  <genericTable
      :page="currentPage"
      :pageNumbers="pageNumbers"
      :headers="headers"
      :items="items"
      :totalItems="totalItems"
      :pageCount="pageCount"
      :itemsPerPage="itemsPerPage"
      @update:page="pageUpdated"
      @update:itemsPerPage="itemsPerPageUpdated">
  </genericTable>
  
• How do i call a specific key depending on the user input?

  I want to call a different key depending on the user input.

  document.getElementById("countries-input").addEventListener("focusout", () =>{
          var input = document.getElementById("countries-input").value;
          console.log(json.input);
       });
  

  the console just logs "undefined".
• How do i change the position of TablePagination component react?

  React Material TablePagination is one component with multiple sub elements like Rows per Page and Pages how do i change Rows per Page position to left side and Pages to right side ?
• React Native: How to test if element is focused?

  Simply test case: Want to see if a given element is focused.

  To check if an element is focused on a react web app with RTL and jest, you have two easy options available to you:

  1. You can check if the element is the same as document.activeElement (may have to discard some wrappers)
  2. You can extend your jest matchers with https://github.com/testing-library/jest-dom#tohavefocus and use expect(<element>).toHaveFocus()

  I'm not sure what the equivalent check would be with react native (the RN equivalent to the jest-dom extension is https://github.com/testing-library/jest-native and is conspicuously missing the toHaveFocus matcher).
• How do I add a select all checkbox and add a checkbox for every option shown?

  I was trying to add a select all check box and a checkbox for each and every row of countries listed. I am getting a checkbox but I am not understanding how to get the checkbox in every row. I am quite new to this and need to implement a simple search bar with a select all box and a checkbox for every row using controlled elements. Thanks!

  import React, { Component, useCallback, useState  } from "react";
  
  
  import {
    Button,
    Input,
    Footer,
    Card,
    CardBody,
    CardImage,
    CardTitle,
    CardText
  } from "mdbreact";
  
  import blankImg from "./blank.gif";
  
  import "./style.css";
  import "./flags.min.css";
  
  import countriesList from "./countries.json";
  
  class App extends Component {
    state = {
      search: ""
    };
  
    handleClick = () => { this.setState({ search: ""}); }
  
    renderCountry = country => {
      const { search } = this.state;
      var code = country.code.toLowerCase();
    function toggle(source) {
        checkboxes = document.getElementsByName('foo');
        for(var checkbox in checkboxes)
          checkbox.checked = source.checked;
      }
      
     
      return (
        <div className="col-md-3" style={{ marginTop: "20px" }}>
          <Card>
            <CardBody>
              <p className="">
                <img
                  src={blankImg}
                  className={"flag flag-" + code}
                  alt={country.name}
                />
              </p>
              <CardTitle title={country.name}>
                {country.name.substring(0, 15)}
                {country.name.length > 15 && "..."}
              </CardTitle>
            </CardBody>
          </Card>
        </div>
      );
    };
  
    onchange = e => {
      this.setState({ search: e.target.value });
    };
    
    
  
    render() {
      const { search } = this.state;
      const filteredCountries = countriesList.filter(country => {
        return country.name.toLowerCase().indexOf(search.toLowerCase()) !== -1;
      });
     
  
      return (
        <div className="flyout">
          <main style={{ marginTop: "4rem" }}>
            <div className="container">
              <div className="row">
               
                <div className="col">
                  
                  <Input
                    label="Search Country"
                    icon="search"
                    onChange={this.onchange}
                  />
                  
                  <button onClick={this.handleClick}> Click to clear</button>
                  <input type="checkbox" onClick="toggle(this)" /> Toggle All<br/>
                </div>
                <div className="col" />
              </div>
              <div className="row">
              <input type="checkbox"></input>
                {filteredCountries.map(country => {
                  return this.renderCountry(country);
                })} <input type="checkbox" name="foo" value="bar1"> Bar 1</input>
              </div>
            </div>
          </main>
          <Footer color="indigo">
            <p className="footer-copyright mb-0">
              &copy; {new Date().getFullYear()} Copyright
            </p>
          </Footer>
        </div>
      );
    }
  }
  
  export default App;
• How can I get the React-Router to load the same page when the request comes from outside the component?

  I have a navigation component at the top of the page, and the individual "pages" of my app load below this navbar. There is a search component that can open the view "page" when an item is selected, but if the view page is already open, the navigation caused by the search isn't performed. Because this navbar (with the search component) is always on the screen (and works from every other page) I am not looking for a solution to "reload the page", since that would be meaningless on any other page. I want to know how to tell the router that it needs to load this page, regardless of whether it is currently loaded.
• react redux, firebas auth, on refresh useSelector show logged in page or re-direct away if no user

  In the main app I have a useEffect hook which will check if user is logged in:

  useEffect(() => {
      auth.onAuthStateChanged((user) => {
        if (user) {
          // User is signed in.
          dispatch(
            setUser({
              name: user.displayName,
              email: user.email,
            })
          );
        } else {
          // No user is signed in.
        }
      });
    }, [dispatch]);
  

  This is calling an action from my user reducer setUser to store the user information. On refresh, or if say I went to the Dashboard page I'd like it to show the page if user is logged in or re-direct to home page if not.

  For now I'm changing the window location to test, but I don't think this is the right way? As it won't be stored in Browser history would it? That's another problem anyway

  At the moment on load, the user is null, so it is running the re-direct even if a user is logged in. How would I write it to wait until firebase has checked if the user exists first - am I going to have to use the auth state change directly in this component instead of using a selector? And the same for everywhere else in my app? I think I may have figured it out myself while writing this question. Would that be the best way? A custom hook perhaps that returns the user?

  Below is the Dashboard page:

  import Section from "../components/Section/Section";
  import Container from "../components/Container/Container";
  import { useSelector } from "react-redux";
  import { userInfo } from "../store/slices/user";
  
  const Dashboard = () => {
    const user = useSelector(userInfo);
  
    const html = user ? (
      <Section>
        <Container>
          <h1>Dashboard</h1>
          <p>If you can see this then you are logged in</p>
        </Container>
      </Section>
    ) : (
      (window.location.href = "/")
    );
  
    return html;
  };
  
  export default Dashboard;
  
  

  Thanks
• Setting up complex sitemap in React-Router (without using react-router-sitemap)

  I have a pretty complex sitemap setup for a site with tens of thousands of links. As such, it's divided up among multiple xml files, however my employer also requested that the sitemaps be organized under indexes such that they reflect the site's interaction flow. For example, my site will have a page url like:

  https://www.example.com/page1

  Where page1 has thousands of subpages. So what I did was I created an index specifically for links under page1 called page1-index.xml, and needs to be accessible under https://www.example.com/page1/page1-index.xml. Since there are thousands of links, they're also separated into multiple categories, with each category being its own sitemap linked in page1-index.xml.

  So what I've got is an index at https://www.example.com/page1/page1-index.xml, and hundreds of sitemaps linked in that xml as https://www.example.com/page1/page1-category-n-sitemap.xml.

  All the sitemap files are in a subfolder in the public folder with a tree that reflects the sitemap, so page1-index.xml is in public/sitemaps/page1/page1-index.xml so that a single route in my App.tsx can cover all sitemaps. Where I'm mainly confused is how exactly I should be returning these xmls in the router. I've got thousands of sitemaps so it's not practical for me to be submitting each individually to search engines. If I submit the indexes then the crawlers need to be able to access the individual sitemaps and that's where I'm uncertain on how to set it up. How should I set up a route or routes to return the xml files when the crawler accesses a link from the index?