Link Tag Inside Browserrouter Changes Only the Url, But Doesn't Render the Component

Link tag inside BrowserRouter changes only the URL, but doesn't render the component

There's a compatibility issue between pre-5.3.3 versions of react-router-dom@5 and react@18.

• Github Issue #7870
• PR #8831 merged to address issue - Fix was merged on May 18th, 2022, react-router-dom v5.3.3.

Solutions

1. Bugfix was merged into v5.3.3. Update to react-router-dom@5.3.3 or higher.

   From the project's root directory run:

   • npm uninstall -S react-router-dom
   • npm install -S react-router-dom@5.3.3 (or @latest)

   

2. Revert back to React 17 (or React 17 syntax) and fix up the index.js file.

   import { StrictMode } from "react";
   import ReactDOM from "react-dom";
   
   import App from "./App";
   
   ReactDOM.render(
     <StrictMode>
       <App />
     </StrictMode>,
     document.getElementById("root")
   );
   

   

3. Make the React.StrictMode component a child/descendent of the router component. Comment.

   Replace:

   <React.StrictMode>
     ...
     <BrowserRouter>
       ...
     </BrowserRouter>
   </React.StrictMode>
   

   with:

   <BrowserRouter>
     <React.StrictMode>
       ...
     </React.StrictMode>
   </BrowserRouter>
   

   

4. Upgrade to react-router-dom@6 and fix up the routes.

   const App = () => {
     return (
       <Router>
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/movies" element={<Home type="movies" />} />
           <Route path="/series" element={<Home type="series" />} />
           <Route path="/watch" element={<Watch />} />
         </Routes>
       </Router>
     );
   }
   

   

React URL changes but component does not render

Try using Routes instead of switch.

1. import Routes

import { BrowserRouter , Redirect, Route , Routes, Switch } from 'react-router-dom';

2. Change the Switch to *Routes

        <Routes>
          <Route exact path="/" >
            <Home />
          </Route>
          <Route path="/details" >
            <Details />
          </Route>
          <Route path="*">
            <Redirect to="/" />
          </Route>
        </Routes>

I hope this helps

Link in react router dom doesn't load page only url browser nav gets changed

You are correct that the MemberForm component remains mounted by the router/route when only the path param is updating. Because of this the MailForm component needs to handle prop values changing and re-run any logic depending on the prop value. The componentDidUpdate is the lifecycle method to be used for this.

Abstract the logic into a utility function that can be called from both componentDidMount and componentDidUpdate.

Example:

getData = () => {
  const urlPath = "members";
  const { memberId } = this.props.match.params;

  // this sets visitor date for db
  const setVisitorDate = this.readableHumanDate(new Date());

  this.setState(
    {
      // if it is a member set to active
      statusSelected: "Active",
      memberSaved: true,
      indiUid: memberId,
      formType: urlPath,
      visitorDate: setVisitorDate
    },
    () => {
      if (memberId) {
        this.setState({ memberSaved: true, indiUid: memberId });
        this.getIndividualMemberInDB(
          this.state.currentOrganization,
          memberId,
          this.state.formType,
          INITIAL_STATE
        );
      }
    }
  );
}

The lifecycle methods:

componentDidMount() {
  this.getData();
}

componentDidUpdate(prevProps) {
  if (prevProps.match.params.memberId !== this.props.match.params.memberId) {
    this.getData();
  }
}

React Router changes the URL but doesn't render the components

In app.js change the import from

import {BrowserRouter as  Switch, Route} from "react-router-dom";

to

import { Switch, Route } from "react-router-dom";

you can import BrowserRouter as Router in index.js but the way it is done in app.js is incorrect.

index.js -> import { BrowserRouter as Router } from "react-router-dom";

Switch renders only one route and whichever route is matched first. Since that is imported incorrectly, the route matching is going wrong.

---

Related Topics