在react中打开子页

Question

在我的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的新文件，在这里我可以构造下一个视图

Answer 1

您需要使用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"));