在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'

const RoutedApp = () => {

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

export default RoutedApp;

然后(在index.js文件中)将RoutedApp设置为应用程序的起始点

import { BrowserRouter } from "react-router-dom";

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