Блог

Я создаю систему приема в больницу, используя React Js, когда столкнулся с некоторыми проблемами с react-router-dom. Когда я нажимал на ссылку или кнопку, я был правильно перенаправлен на ожидаемую страницу. Однако, когда я попытался скопировать точную ссылку на вкладке URL и повторно запустить ее на новой вкладке или даже просто перезагрузить ее, страница не работает должным образом, дизайн отключен, картинки исчезли, но описания все еще там. Есть какие-нибудь идеи, почему возникают эти проблемы? Вот фрагмент моего кода

main.js

 function App() {  const userSignin = useSelector((state)=gt;state.userSignIn);  const {userInfo} = userSignin;  const history = useHistory()  const dispatch = useDispatch()  const signoutHandler = () =gt;{  dispatch(signout());  history.push("/");  };      return (  lt;BrowserRoutergt;  lt;div id="page-top" data-spy="scroll" data-target=".navbar-custom"gt;  lt;div id="wrapper"gt;  lt;nav className="navbar navbar-custom navbar-fixed-top" role="navigation"gt;  lt;div className="top-area"gt;  lt;div className="container"gt;  lt;div className="row"gt;  lt;div className="col-sm-6 col-md-6"gt;  lt;p className="bold text-left"gt;Monday - Saturday, 8am to 10pm lt;/pgt;  lt;/divgt;  lt;div className="col-sm-6 col-md-6"gt;  lt;p className="bold text-right"gt;Call us now  62 008 65 001lt;/pgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;   lt;div className="container navigation"gt;  lt;div className="navbar-header page-scroll"gt;  lt;button type="button" className="navbar-toggle" data-toggle="collapse"  data-target=".navbar-main-collapse"gt;  lt;i className="fa fa-bars"gt;lt;/igt;  lt;/buttongt;  lt;Link className="navbar-brand" to="/"gt;lt;span className="medi"gt;MEDIlt;/spangt;lt;span className="call"gt;CALLlt;/spangt;  lt;/Linkgt;  lt;/divgt;   lt;div className="collapse navbar-collapse navbar-right navbar-main-collapse"gt;  lt;ul className="nav navbar-nav"gt;  lt;li className="active top"gt;lt;Link to="/"gt;Homelt;/Linkgt;lt;/ligt;  lt;li className="top"gt;lt;Link to="/#service"gt;Servicelt;/Linkgt;lt;/ligt;  lt;li className="top"gt;lt;Link to="/#doctor"gt;Doctorslt;/Linkgt;lt;/ligt;  lt;li className="top"gt;lt;Link to="/#facilities"gt;Facilitieslt;/Linkgt;lt;/ligt;  {userInfo ? (  lt;li className="dropdown top"gt;  lt;Link to="#" className="dropdown-toggle" data-toggle="dropdown"gt;lt;span className="badge custom-badge red pull-right"gt;lt;/spangt;Welcome {userInfo.data[1]} lt;b className="caret"gt;lt;/bgt;lt;/Linkgt;  lt;ul className="dropdown-menu"gt;  lt;ligt;lt;Link to="/appointments"gt;Appointmentslt;/Linkgt;lt;/ligt;  lt;ligt;lt;Link to="/createAppointment"gt;Request Appointmentlt;/Linkgt;lt;/ligt;  lt;ligt;lt;Link to="#"gt;Transactionslt;/Linkgt;lt;/ligt;  lt;ligt;lt;Link to="#"gt;Medicineslt;/Linkgt;lt;/ligt;  lt;li className="top"gt;lt;Link to="/onlineres"gt;Online Resultlt;/Linkgt;lt;/ligt;  lt;li gt; lt;Link onClick={signoutHandler} className="dropdown-item" gt;Sign Outlt;/Linkgt;lt;/ligt;  lt;/ulgt;  lt;/ligt;  ):(  lt;li className="top"gt;lt;Link to="/signin"gt;Sign Inlt;/Linkgt;lt;/ligt;  )}  lt;/ulgt;  lt;/divgt;    lt;/divgt;  lt;/navgt;    lt;/divgt;  lt;/divgt;  lt;Switchgt;  lt;Route exact path='/signin' component={UserTypeSignIn}gt;lt;/Routegt;  lt;Route exact path='/signin/:user' component={SignIn}gt;lt;/Routegt;  lt;Route path="/register" component={Register}/gt;  lt;Route path ="/medhistory" component={MedicalHistory}/gt;  lt;Route path ="/appointments" component={AppointmentPage}/gt;  lt;Route path ="/onlineres" component={Results}/gt;  lt;Route path="/createAppointment" component={CreateAppointmentSlip}/gt;  lt;Route path="/dentistryquestions" component={DentistQuestions}/gt;  lt;Route path="/obgynequestions" component={OBquestionScreen}/gt;  lt;Route path="/medicalcard" component={MedicalCardScreen}/gt;  lt;Route path="/optalquestions" component={OptalQuestionsScreen}/gt;  lt;Route path="/generalHealthquestions" component={GeneralHealthScreen}/gt;  lt;Route path = "/"gt;  lt;Intro/gt;  lt;/Routegt;  lt;/Switchgt;  lt;BrowserRoutergt; );  

Спасибо!