Question

这个小问题我很麻烦。当我刷新我的页面时，它给出一个错误`

获取http://localhost:3000/drink/bundle.js净值：: ERR_ABORTED 404（未找到）

拒绝应用“ http://localhost:3000/drink/style.css”中的样式，因为它的MIME类型（“ text / html”）不是受支持的样式表MIME类型，并且启用了严格的MIME检查。

我知道这是溃败的一个问题，但我找不到解决办法。这是我的代码`

import * as React from "react"; import {connect} from "react-redux"; import {drinksSelector} from "../selectors" import {getDrinksList, getNameFilter} from "../actions"; import Drink from "./Drink"; import SearchIcon from "./SvgIcons";

class Drinks extends React.Component { 
    componentDidMount() {
       this.props.dispatchDrinksList();   
  }

  handleInputChange = (e: any) => {
    e.preventDefault();
    this.props.dispatchNameFilter(e.target.value)   }

  render() {
    const {drinks} = this.props;
    return (
      <div>
        <header className="main-header">
          <form className="main-header__from">
            <div className="search-wrapper">
              <input autoComplete='off'
                type="text" 
                name="search" 
                placeholder="Search" 
                className="main-header__input" 
                onChange={this.handleInputChange}/>
              <SearchIcon />
            </div>
          </form>
        </header>
        <ul>
          {drinks.map((drink: any) => <Drink key={drink.idDrink} url={drink.strDrinkThumb} name={drink.strDrink} id={drink.idDrink}/>)}
        </ul>
      </div>
    );   } } const mapStateToProps: any = (state: any) => drinksSelector(state);

const mapDispatchToProps: any = (dispatch: ReturnType<typeof mapDispatchToProps>) => ({   dispatchDrinksList() {
    dispatch(getDrinksList());   },

  dispatchNameFilter(value: any) {
    dispatch(getNameFilter(value));   
  } });

export default connect(mapStateToProps, mapDispatchToProps)(Drinks);

上面是仪表板页面，我在其中显示饮料清单，单击它们后，路线将更改为/drink/someId

import * as React from 'react'; import { connect } from 'react-redux'; 
import { NavLink } from "react-router-dom";

const Drink = ({ url = "", name, id }: any): any => (
    <li>
      <NavLink to={`/drink/${id}`}>
        <h2>{name}</h2>
        <img src={url} alt={name} height="350" width="350"/>
      </NavLink>
    </li>    );

export default Drink;

这是刷新后出现错误的页面。

import * as React from 'react';
import { connect } from 'react-redux';
import { NavLink } from "react-router-dom";
import {getDrinkInfo} from "../actions";

class DrinkInfo extends React.Component<any, any> {
  componentDidMount() {
    const id = localStorage.getItem("id");
    if (!id) {
      localStorage.setItem("id", this.props.match.params.id);
    }
    this.props.dispatchDrinkInfo(localStorage.getItem("id"));
  }

  render() {
    const { drink } = this.props;
    console.log(this.props, ">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>")
    return (
      <div className="drink-info">
        <header className="drink-info__header">
          <button onClick={() => this.props.history.goBack()} className="drink-info__button">Go Back</button>
          <h2 className="drink-info__title">{drink && drink.strDrink}</h2>
        </header>
        <section className="details">
          <div className="details__image-box">
            <img src={drink && drink.strDrinkThumb} alt={drink && drink.strDrink} height="350" width="350"/>
          </div>
          <div className="details__info">
            <p className="details__ingredients"></p>
            <div className="details__prepare">
              <h3 className="details__prepare-heading">How to prepare</h3>
              <p className="details__prepare-text">
                {drink && drink.strInstructions}
              </p>
            </div>
          </div>
        </section>
      </div>
    )
  }
}

const mapStateToProps: any = (state: any) => {
    return {
      drink: state.drink.get("drinkInfo") || {}
    }
}

const mapDispatchToProps: any = (dispatch: ReturnType<typeof mapDispatchToProps>) => ({
  dispatchDrinkInfo(id: number) {
    dispatch(getDrinkInfo(id));
  }
});

export default connect(mapStateToProps, mapDispatchToProps)(DrinkInfo);

我的路由器`

import * as React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import DashboardPage from '../components/DashboardPage';
import DrinkInfo from '../components/DrinkInfo';
import NotFoundPage from '../components/NotFoundPage';

const AppRouter = () => (
      <BrowserRouter>
        <React.Fragment>
          <Switch>
            <Route path="/" component={DashboardPage} exact/>
            <Route path="/drink/:id" component={DrinkInfo}/>
            <Route component={NotFoundPage} />
          </Switch>
        </React.Fragment>
      </BrowserRouter>
    );

export default AppRouter;

刷新后React组件抛出错误

0 个答案: