Reactjs 即使满足条件，主零部件也未渲染

我正在构建一个React应用程序，并尝试在localhost:3000上呈现主组件。在这个应用程序中，Main由app组件呈现，如果用户当前在localhost:3000，我希望Main呈现Home组件。下面的代码是我的main.js，我在这里进行条件渲染。然而，当我在localhost:3000使用任何一种方法时，Home组件都没有呈现，它只是一个空白页。我想知道如何解决这个问题。谢谢

class Main extends Component {
  render() {
    const HomePage = () => {
      return <Home />;
    };

    const WaitingRoomPage = () => {
      return <WaitingRoom />;
    };

    ......

    //1st approach
    let home;
    if (window.location.href === "http://localhost:3000") {
      home = <Home />;
    }

    //2nd approach
    const home = window.location.href === "http://localhost:3000" ? <Home /> : null;


    return (
      <div>
        <Switch>
          <Route path='/home' component={HomePage} />
          <Route path='/physics' component={PhysicsPage} />
          <Route path='/startstream' component={StartStreamPage} />
          <Route path='/stream' component={StreamPage} />
          <Route path='/signup' component={SignUpPage} />
          <Route path='/login' component={LogInPage} />
          <Route path='/profile' component={ProfilePage} />
          <Route path='/waitingroom' component={WaitingRoomPage} />
          <Route path='/streamingplaza' component={StreamingPlazaPage} />
          <Route path='/settings' component={SettingsPage} />
        </Switch>

        //Conditionally rendering Home component
        {home}

      </div>
    );
  }
}

export default Main;

类主扩展组件{
render（）{
const主页=（）=>{
返回；
};
const WaitingRoomPage=（）=>{
返回；
};
......
//第一种方法
让我们回家；
如果（window.location.href==”http://localhost:3000") {
家=；
}
//第二种方法
const home=window.location.href==”http://localhost:3000“？：空；
返回(
//有条件地呈现主组件
{home}
);
}
}
导出默认主；

普通

localhost:3000

的路径是

/

，而不是

/home

。您可以通过将

主页

的

路径

从

“/home”

更改为

“/”

来解决此问题，并将道具

精确

（布尔值）添加到该

路线

。

exact

道具告诉路由器，只有当窗口的路径正好是

“/”

时才匹配，而不仅仅是当它以

“/”

开头时才匹配（如果您忽略此选项，则只有

主页

组件将呈现，其他组件都不会呈现）。如果您希望仍然支持

/home

路由，您可以添加另一个满足上述更改的路由

在此之后，您可以使用

{home}

删除第一次和第二次尝试代码以及返回的部分组件

下面是一个完整的示例：

类主扩展组件{
render（）{
const主页=（）=>{
返回；
};
const WaitingRoomPage=（）=>{
返回；
};
// ...
返回(
);
}
}

非常感谢您！如果项目处于生产模式，并且我在package.json中包含了“homepage”：“将导致主组件也呈现在mywebsite.com上？是的，以这种方式执行路由将使其工作，而不考虑主机。