React js Route компонент заставляет мою страницу перестать отвечать на запросы

Question

    const Header = () => {
        return (
            <Router>
                <div> 
                    <ul id='navBar'>
                        <li className="listElem"><Link to="/">Home</Link></li>
                        <li className="listElem" ><Link to='/browse'>Browse</Link></li>
                        <li className="listElem" ><Link to='/cart'>Cart</Link></li>
                        <li className="listElem" ><Link to="/account_settings">Account Settings</Link></li>
                        <li className="listElem" ><Link to="/signin">Sign in</Link></li>
                    </ul>
                    <Switch>
                        <Route path="/">
                            <Home />
                        </Route>
                        <Route path="/browse">
                            <BrowseInventory />
                        </Route>
                        <Route path="/cart">
                            <Cart />
                        </Route>
                        <Route path="/account_settings" >
                            <CreateAccount />
                        </Route>
                        <Route path="/signin">
                            <Login />
                        </Route>
                    </Switch>
                    {/* //Currently does not work */}
                </div>
             </Router>
        )



}

Я не уверен, почему, но когда я использую компонент Route из response-router-dom, моя страница никогда не загружается, так как на экране ничего не появляется, и компоненты не монтируются.

Answer 1

Я думаю, вы должны включить ключевое слово exact во все ваши маршруты

, вот так

<Route exact path="/signin">

О да, и еще одна вещь, которую я думаю, ваши маршруты должны быть на Компонент приложения вместо заголовка, как этот

function App(props) { <-----------------my routes are at the top level
  return (
    <div>
      <NavBar /> <--------notice i have a navbar component here
      <Switch>
        <Route exact path='/' component={Home} /> <---------------see how i have exact path here
        <Route exact path='/signup' component={Signup} />
        <Route exact path='/login' component={Login} />
        <Route exact path="/profile" component={Profile} />
        <Route exact path="/animal/:id" component={(props) => <Showpage {...props}/>} />
      </Switch>
    </div>
  );
}

Вы видите, как у меня есть мои маршруты в компоненте приложения