روابط react-router لا تعمل عند تحديث الصفحة

يمكنك إستخدام React Router النسخة الجديدة بهذه الطريقة، حيث أن الدالة run أصبحت غير صالحة في النسخة الجديدة، وغير محبذ ان تستخدمها.

import React from 'react';
import ReactDOM from 'react-dom';

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

function Home() {
  return <h1>Home</h1>;
}

function About() {
  return <h1>About Us</h1>;
}

ReactDOM.render(
  <BrowserRouter>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
    </div>
    <Switch>
      <Route path="/about">
        <About />
      </Route>
      <Route path="/">
        <Home />
      </Route>
    </Switch>
  </BrowserRouter>,
  document.getElementById('root')
);

أنت تستخدم نسخة قديمة من المكتبة قم بتحديث الى النسخة الاخيرة 

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

export default function App() {
  return (
    <Router>
        <Switch>
          <Route name="home" exact path="/">
            <Home />
          </Route>
          <Route name="persons" path="/persons">
            <Persons />
          </Route>
          <Route >
            <NotFound />
          </Route>
        </Switch>
    </Router>
  );
}

او يمكنك كتابة الكود بهذه الطريقة فهي أقرب لما اعتدت عليه فقط هنا ال handler تغير وأصبح اسمه component

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

export default function App() {
  return (
    <Router>
        <Switch>
          <Route name="home" exact path="/" component={Home}>
          
          <Route name="persons" path="/persons" component={Persons}>
        
          <Route component={NotFound}>
         
        </Switch>
    </Router>
  );
}