محتوى الصفحة لا يتغير في react-router؟

في البداية دعنا نفهم كيف يعمل ال router 
على سبيل المثال إذا كان عنوان الموقع الخاص بنا 
www.example.com
فحين الولوج الى الموقع يقوم الروتر بأخذ مابعد .com  وهنا الإفتراضي هو "/"والبحث عنه بأسلوب إذا وجدت اي مسار داخل ال BrowserRouter يبدأ ب "/" فقم بعرض المكون الخاص بهذا المسار 

ولذا ففي المثال المرفق حينما تقوم بتغير المسار إالى "www.example.com/profile"  يقوم الروتر بإقتطاع الجزء بعد .com وهو "profile/"  ويذهب ليبحث ويرى أي مسار يبدأ بأي شئ يطابق "profile/" في الترتيب حيث أن اول جزء هو "/" فيكون متطابقا مع أول مسار "/" فيقوم بعرض المكون الخاص به 

ولذا فيمكننا حل هذا الأمر بعدة طرق منها التالى: 

1- إستخدام Switch 

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

import People from "./components/People";
import Profile from "./components/Profile";

ReactDOM.render(
  <BrowserRouter>
    <Switch>
      <Route path="/" component={People} />
      <Route path="/profile" component={Profile} />
    </Switch>
  </BrowserRouter>,
  document.getElementById("root")
);

2- إستخدام كlلة exact ك props وبالتي سيطابق المسار الموجود بالجزء المقتطع تماما 

ReactDOM.render((
  <BrowserRouter>
        <Route exact path="/" component={People} />
        <Route exact  path="/profile" component={Profile} />
  </BrowserRouter>
), document.getElementById('root'))

لا يتغير محتوى الصفحة لأنك تظل في المكون people أو (" / ") لماذا ؟

لأن المسار "profile/" يحتوي على ال "/"  وبالتالي router بإستدعاء ال "/" ولذلك تحتاج لإستخدام الخاصية exact كالتالي

import React from "react";
import ReactDOM from "react-dom";
import { Router, Route } from "react-router";
import { BrowserRouter, Router } from 'react-router-dom'; //react لا تنسى إستدعاء 

import People from "./components/People";
import Profile from "./components/Profile";

ReactDOM.render((
  <BrowserRouter>
        <Route exact path="/" component={People} />
        <Route path="/profile" component={Profile} />
  </BrowserRouter>
), document.getElementById('root'))