1

I use react-router-dom@5, and add 'exact' in the script.

When I click the button, the web address already change but the page can't render. So I have to refresh page to make it show the current.

Try to put the "< Route exact path="/" component={ListEmployeeComponent} />" at last, but it still can't work. Also try to put 'exact' in every script and still can't work.

I have no idea where's wrong. Please help me... Thanks

import "./App.css";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import ListEmployeeComponent from "./components/ListEmployeeComponent";
import HeaderComponent from "./components/HeaderComponent";
import FooterComponent from "./components/FooterComponent";
import CreateEmployeeComponent from "./components/CreateEmployeeComponent";
import UpdateEmployeeComponent from "./components/UpdateEmployeeComponent";

function App() {
  return (
    <div>
      <Router>
        <HeaderComponent />
        <div className="container">
          <Switch>
            <Route exact path="/" component={ListEmployeeComponent} />
            <Route path="/employees" component={ListEmployeeComponent} />
            <Route path="/add-employee" component={CreateEmployeeComponent} />
            <Route path="/update-employee/:id" component={UpdateEmployeeComponent} />
          </Switch>
        </div>
        <FooterComponent />
      </Router>
    </div>
  );
}

export default App;
Caerus
  • 11
  • 1
  • What version of React are you using, React 18? Are there any errors in the console? Does this answer your question? https://stackoverflow.com/a/71833424/8690857 – Drew Reese Apr 25 '22 at 15:49
  • HI~@DrewReese Thank you for the information. It helps me a lot. My proj is React@18, with react-router-dom@5. Before I only check react-router-dom version, and my search in internet there's no such info like incompatible between react@18 and react-router-dom@5. And thanks again, really appreciate your help. – Caerus Apr 26 '22 at 03:42
  • I suspect you won't find too many hits because React 18 has only been out for a couple weeks and I think most have either already moved forward to RRDv6 so they don't see the issue, or for whatever reason (*perhaps a more mature codebase*) stuck with React 17 and RRDv4/5 (*haven't updated yet*) and don't see the issue. Perhaps "incompatibility" isn't quite the correct term now that more information has been found on the issue. Cheers. – Drew Reese Apr 26 '22 at 04:16

0 Answers0