我已经建立了使用react-router-domand制作的项目craco。我也尝试运行react-scripts构建，但仍然无法正常工作。我猜这个问题本身并没有出现craco。该网站基本上只是渲染加载屏幕，然后变成白色而不渲染任何东西。
包.json
{
"name": "linguo",
"homepage": ".",
"version": "0.1.0",
"private": false,
"dependencies": {
"@chakra-ui/icons": "^1.0.14",
"@chakra-ui/react": "^1.6.5",
"@craco/craco": "^6.2.0",
"@devexpress/dx-react-core": "^2.7.6",
"@devexpress/dx-react-scheduler": "^2.7.6",
"@devexpress/dx-react-scheduler-material-ui": "^2.7.6",
"@emotion/react": "^11.4.0",
"@emotion/styled": "^11.3.0",
"@material-ui/core": "^4.12.2",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.60",
"@reduxjs/toolkit": "^1.6.1",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"aos": "^3.0.0-beta.6",
"axios": "^0.21.1",
"classnames": "^2.3.1",
"deep-diff": "^0.3.8",
"enquire.js": "^2.1.6",
"framer-motion": "^4.1.17",
"jquery": "^3.6.0",
"json2mq": "^0.2.0",
"lodash": "^4.17.21",
"lodash.debounce": "^4.0.8",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-google-login": "^5.2.2",
"react-google-recaptcha": "^2.1.0",
"react-icons": "^4.2.0",
"react-owl-carousel": "^2.3.3",
"react-player": "^2.9.0",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-select": "^4.3.1",
"react-slick": "^0.28.1",
"react-stacked-carousel": "^1.1.2",
"react-table": "^7.7.0",
"redux": "^4.1.0",
"redux-logger": "^3.0.6",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0",
"resize-observer-polyfill": "^1.5.1",
"slick-carousel": "^1.8.1",
"styled-components": "^5.3.0",
"tachyons": "^4.12.0",
"underscore": "^1.13.1",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^9.8.6",
"postcss": "^7.0.36",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.4"
},
"proxy": "http://localhost:5000/"
}
应用程序.js
import React from 'react';
import {
BrowserRouter as Router,
Switch,
Route
} from 'react-router-dom';
import { connect } from 'react-redux';
import Homepage from './pages/homepage/Homepage';
import ChooseLanguage from './pages/learn/ChooseLanguage';
import './App.css';
import Dashboard from "./pages/dashboard/Dashboard";
import RegisterPage from './pages/register/RegisterPage';
import ChooseLevel from './pages/learn/ChooseLevel';
import ChooseClass from './pages/learn/ChooseClass';
import PrivateRoute from './routes/PrivateRoute';
import CheckoutPage from './pages/learn/CheckoutPage';
import {SignInModal} from './pages/homepage/Homepage';
import {
setEmail,
setPassword,
requestUserData,
logoutUser,
requestUserDataGoogle
} from './redux/actions';
import PaymentCallback from './components/commerce/PaymentCallback';
const mapStateToProps = state => {
return {
userData: state.requestUserData.userData,
email: state.inputLoginDetails.email,
password: state.inputLoginDetails.password,
loginDetails: state.inputLoginDetails,
error: state.requestUserData.error,
isAuthenticated: state.requestUserData.isAuthenticated
}
}
const mapDispatchToProps = (dispatch) => {
return {
onChangeEmail: (e) => dispatch(setEmail(e.target.value)),
onChangePassword: (e) => dispatch(setPassword(e.target.value)),
onSignIn: () => dispatch(requestUserData()),
onLogout: () => {
dispatch(logoutUser());
},
onGoogleSignIn: (res) => {
console.log(res.profileObj);
dispatch(requestUserDataGoogle(res))
}
}
}
class App extends React.Component {
constructor(){
super();
this.state = {
isLoading: true,
signInModalOpen: false,
}
this.onCloseModal = this.onCloseModal.bind(this);
this.onOpenModal = this.onOpenModal.bind(this);
}
onCloseModal(){
this.setState({
signInModalOpen: false
})
}
onOpenModal(){
this.setState({
signInModalOpen: true
})
}
componentDidMount(){
demoAsyncCall().then(() => this.setState({ isLoading: false }));
if (this.props.isAuthenticated) {
// console.log(this.props.userData);
} else {
console.log('not logged in');
}
}
componentWillUnmount(){
this.setState({ isLoading: true });
}
render() {
const { isLoading } = this.state;
if (isLoading) {
return (
<div className="loadingio-spinner-eclipse-vgq0bd31nn">
<div className="ldio-993grhhyw4u">
<div>
</div>
</div>
</div>
);
}
return (
<div className="App">
<Router>
<SignInModal
err={this.props.error}
logout={this.props.onLogout}
onClose={this.onCloseModal}
isOpen={this.state.signInModalOpen}
isAuthenticated={this.props.isAuthenticated}
userName={this.props.isAuthenticated?this.props.userData.firstName:''}
click={this.props.onSignIn}
inputEmail={this.props.onChangeEmail}
inputPass={this.props.onChangePassword}
googleSuccess={this.props.onGoogleSignIn.bind(this)}
/>
<Switch>
<Route path="/" component={Homepage} exact/>
<Route path="/choose-language" component={ChooseLanguage}/>
<Route path="/choose-level" render={(props) => (<ChooseLevel onAuthClick={this.onOpenModal} {...props}/>)}/>
<Route path="/choose-class" render={(props) => (<ChooseClass onAuthClick={this.onOpenModal} {...props}/>)}/>
<Route path="/checkout" render={(props) => (<CheckoutPage onAuthClick={this.onOpenModal} signInModal={this.onOpenModal} {...props}/>)}/>
{/* <PrivateRoute path="/dashboard" component={Dashboard}/> */}
<Route path="/register" component={RegisterPage}/>
<PrivateRoute path='/payment-success' component={PaymentCallback}/>
</Switch>
</Router>
</div>
);
}
}
function demoAsyncCall() {
return new Promise((resolve) => setTimeout(() => resolve(), 500));
}
export default connect(mapStateToProps, mapDispatchToProps)(App);