时间戳

首页 > 解决方案 > 反应组件或元素未显示在路由器中

javascript - 反应组件或元素未显示在路由器中

问题描述

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

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

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

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

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

标签： javascriptreactjsreact-router

解决方案

因为你的第一次溃败的条件正在被满足和呈现。

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

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

推荐阅读