反应组件或元素未显示在路由器中答案

【问题标题】：React Component or Elements not showing in Router反应组件或元素未显示在路由器中
【发布时间】：2021-11-12 15:53:35
【问题描述】：

所以我试图用 React js 制作一个包含主页和登录页面（未来可能会更多）的网站。

我有两条路线，一条显示登录屏幕，另一条显示主屏幕。

现在的问题是 Login 组件显示，但 MainScreen 没有。（当我在浏览器的网址栏中粘贴“http://localhost:3000/home/”时，仍然显示登录组件）

这是我在 App.js 中的代码：

return (
    <div className="App">
    <Router>    
        <Switch>
          <Route path="/" >
              <LoginScreen />
          </Route>
          <Route path="/home" >
            <MainScreen />
          </Route>
        </Switch>
      </Router>
    </div>
  );

【问题讨论】：

要么添加确切的路由道具，要么将登录路由放在主屏幕路由之后。

标签： javascript reactjs react-router

【解决方案1】：

因为您的第一次溃败的条件正在满足并呈现。

添加 EXACT，它应该可以工作。

return (
    <div className="App">
    <Router>    
        <Switch>
          <Route exact path="/" >
              <LoginScreen />
          </Route>
          <Route exact path="/home" >
            <MainScreen />
          </Route>
        </Switch>
      </Router>
    </div>
  );

【讨论】：