Javascript 在react中打开子页

在我的react应用程序中，我有这个app.js文件

从“React”导入React；
从“./pages/Login”导入登录名；
函数App（）{
返回(
);
}
导出默认应用程序；

我的Login.Js中有这个链接（还有一些与问题无关的东西）

import React，{Component}来自'React'；
导入“../css/App.css”；
导入“../css/Login.css”
导入“w3 css”；
从“../images/logo.png”导入徽标；
类登录扩展组件{
render（）{
返回(
管理员
);
}
}

因此，当用户单击链接时，会打开一个子页面，其中包含域

localhost:3000/admin

---

如何相应地更新我的UI并打开一个类似于Login.js的新文件，在那里我可以构建下一个视图

您需要使用

react router dom

包设置项目的前端路由

如下图所示

import { Switch, Route } from 'react-router-dom'
import AdminPage from 'path/to/your/AdminPage'
import Login from 'path/to/your/Login'

const RoutedApp = () => {

    return (
       <Switch>
         <Route exact path="/admin" component={AdminPage}/>
         <Route exact path="/login" component={Login}/>
       </Switch>
    );
}

export default RoutedApp;

---

看一看（这里是一个最小的例子）@Adventure，当在浏览器中打开它时，让我知道任何问题，这将导致完全白色的页面！好的，你更新了答案，它呈现了登录页面，而不是管理员页面。只需访问以检查管理员页面是否正常。我发现了我的问题，我没有在我的路线中使用

确切的
关键字
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <RoutedApp />
  </BrowserRouter>,
  document.getElementById("root")
);