在我的react应用程序中，我有这个app.js文件
import React from 'react';
import Login from './pages/Login';
function App() {
return (
<Login />
);
}
export default App;
我的login.js中有这个链接（还有一些与问题无关的东西）
import React, {Component} from 'react';
import '../css/App.css';
import '../css/Login.css'
import 'w3-css';
import logo from '../images/logo.png';
class Login extends Component {
render() {
return (
<div>
<p style={{fontSize:'14px'}}>Admin? <a href="admin">Login as admin</a></p>
</div>
);
}
}
因此，当用户单击该链接时，它将打开一个子页面，其域为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'
cosnt RoutedApp = () => {
return (
<Switch>
<Route exact path="/admin" component={<AdminPage/>}/>
<Route exact path="/login" component={<Login/>}/>
</Switch>
);
}
export default RoutedApp;
然后将routedapp设置为应用程序的起点。
ReactDOM.render(RoutedApp, document.getElementById("root"));
