reactjs - 在具有 ID 的路径上出现白页错误 - 反应路由器 dom

Question

我正在尝试在重置密码时使用 id。虽然其他页面工作正常，但带有 id 的重置页面在部署时抛出了一个白页。但是，重置页面在 localhost 中工作。

设置路由路径：

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { UserProvider } from "./UserContext";
import ForgotPass from "./components/ForgotPass";
import ResetPassword from "./components/ResetPass";
import RegisterUser from "./components/Register";
import UserLogin from "./components/UserLogin";
import Dashboard from "./components/Dashboard";

function App() {
  return (
    <Router>
      <UserProvider>
        <div className="container px-0">
          <Switch>
            <Route exact path="/register" component={RegisterUser}></Route>
            <Route exact path="/dashboard" component={Dashboard}></Route>
            <Route exact path="/forgot-password" component={ForgotPass}></Route>
            <Route path="/reset/:id" component={ResetPassword}></Route>
            <Route exact path="/" component={UserLogin}></Route>
          </Switch>
        </div>
      </UserProvider>
    </Router>
  );
}

export default App;

错误日志 - Chrome：

2.2ea4f433.chunk.js:1 Uncaught SyntaxError: Unexpected token '<'
main.93407c2a.chunk.js:1 Uncaught SyntaxError: Unexpected token '<'
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.

​错误日志 - 火狐：

The stylesheet https://proj-resetpassword.netlify.app/reset/static/css/2.61b4cb56.chunk.css was not loaded because its MIME type, “text/html”, is not “text/css”. 7667
The stylesheet https://proj-resetpassword.netlify.app/reset/static/css/main.21b13064.chunk.css was not loaded because its MIME type, “text/html”, is not “text/css”. 7667
The script from “https://proj-resetpassword.netlify.app/reset/static/js/main.93407c2a.chunk.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.
7667
The script from “https://proj-resetpassword.netlify.app/reset/static/js/2.2ea4f433.chunk.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.
7667
Uncaught SyntaxError: expected expression, got '<'
2.2ea4f433.chunk.js:1
Uncaught SyntaxError: expected expression, got '<'
main.93407c2a.chunk.js:1

以下是我在 React 中的重置页面

import React, { useState } from "react";
import { Link, useHistory } from "react-router-dom";

function ResetPassword() {
  const history = useHistory();
  const [newpass, setNewpass] = useState("");
  const [repeatpass, setRepeatpass] = useState("");
  const handleSubmit = async (e) => {};

  return (
    <div className="card card__">
      <p className="title">Update Password</p>
      <div className="reset-img">
        <img
          src="/imgs/key.jpeg"
          className="card-img-top real-img"
          alt="reset-password-img"
        />
      </div>
      <div className="card-body">
        <p className="hidden invalid">
          <small className="text-danger">
            Password do not match. Please try again.
          </small>
        </p>
        <p className="hidden valid">
          <small className="text-success">
            You have successfully registered your new password.
          </small>
        </p>
        <p className="hidden unauthorized">
          <small className="text-danger">
            Unauthorized Access. Verify your email again.
          </small>
        </p>
        <form className="reset-form" onSubmit={handleSubmit}>
          <div className="form-group">
            <label htmlFor="inputPass1">New Password</label>
            <input
              type="password"
              className="form-control my-2"
              id="inputPass1"
              aria-describedby="passHelp"
              required
              onChange={(e) => setNewpass(e.target.value)}
            />
            <label htmlFor="inputPass2">Repeat Password</label>
            <input
              type="password"
              className="form-control my-2"
              id="inputPass2"
              aria-describedby="passHelp"
              required
              onChange={(e) => setRepeatpass(e.target.value)}
            />
          </div>
          <button type="submit" className="btn btn-primary my-2">
            Reset
          </button>
        </form>
        <div className="links">
          <Link to={"/forgot-password"} className="link">
            Forgot Password
          </Link>
        </div>
      </div>
    </div>
  );
}

export default ResetPassword;

UserLogin、RegisterUser、Dashboard、ForgotPass - 除 ResetPassword 页面外，这些页面都显示良好。

请帮我找出解决方案。谢谢！

标签： reactjsreact-router

Answer 1

问题是您没有渲染组件，而在定义Router.

您需要Router从函数（定义为函数的组件）或从Component扩展类的渲染函数返回 JSX。JavaScript 运行时不知道如何处理现在的<Router>{/*...*/}</Router>JSX。看看你的ResetPassword组件在做什么，并作为一个定义为函数的组件的示例，或者查看组件和道具文档。

此外，您可能希望在该文件中导入您的RegisterUser、Dashboard、ForgotPass、ResetPassword和UserLogin组件 - 否则运行时将无法找到这些引用。

作为函数的组件

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';

function MyRouterComponent() {
  return (
    <Router>
      { /* ... */ }
    </Router>
  );
}

作为Component扩展类的组件

import React, { Component } from 'react';
import { BrowserRouter as Router } from 'react-router-dom';

class MyRouterComponent extends Component {
  render() {
    return (
      <Router>
        { /* ... */ }
      </Router>
    );
  }
}