Question

我是 React 的初学者，所以这是我在 React 中的第一个应用程序。

这是我的 App.js 文件。

import './App.css';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import Login from './componants/Login';
import Home from './componants/Home';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/login" component={Login}/>
        <Route exact path="/home" component={Home}/>
      </Switch>
    </Router>
    
  );
}

export default App;

我将它导出到 index.js 文件中。这是我的 Login.jsx 文件。

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './login.css';
import { useHistory } from 'react-router-dom';

function Login() {
    let history = useHistory();

    return (
        <section>
            <form>
                <h1>Note Maker</h1>
                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter your email"></input>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Enter your password"></input>
                <button onClick={() => { history.push("/home"); }} type="submit" class="btn">Login</button>
            </form>
        </section>
        
    );
}

export default Login;

每当我点击按钮时，它都会带我到 /home 路线。

这里我怀疑每当我启动我的应用程序时它会在 localhost:3000 上运行，但我的路线是 /login 和 /home 因此我必须写 localhost:3000/login为了呈现登录页面，我不想要这个，我想在 localhost:3000 上呈现它，并且在该代码中，我的按钮点击重定向也应该正常工作。

否则建议我如何在单击按钮时重定向到另一条路线。

Answer 1

我认为

extension String
    {
            func getHTMLFromString(htmlText: String,fonthexColor:String,fontName:String,fontSize:Int)->NSAttributedString?
            {
                  let modifiedFont = String(format:"<span style=\"color:\(fonthexColor);font-family:\(fontName); font-size: \(fontSize)\">%@</span>", htmlText)
        
                  let attrStr = try! NSAttributedString(
                      data: modifiedFont.data(using: .unicode, allowLossyConversion: true)!,
                      options: [.documentType: NSAttributedString.DocumentType.html, .characterEncoding:String.Encoding.utf8.rawValue],
                      documentAttributes: nil)
             
                  return attrStr
              }
        }

应该做的工作

Answer 2

有两种解决方案

1> 如果你想渲染 localhost:3000

在你的 App.js 文件中为 / 添加一个路由

<Route exact path="/" component={Login}/>

2>如果你不想渲染 localhost:3000 加载组件时重定向您的页面以登录。在您的 App.js 中添加类似的内容会有所帮助

useEffect(()=>{
   history.push('/login')
},[])

反应渲染和按钮点击重定向

2 个答案: