项目基础确认搭建完成

src/App.css

@@ -1,38 +1,14 @@
-.App {
-  text-align: center;
+a.btn {
+  text-decoration: none;
+  color: white !important;
+  border-radius: .5rem;
+  padding: .375rem 1.75rem;
+  font-size: 1.1rem;
+}
+a.btn:active {
+  color: white !important;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+.btn-primary {
+  background-color: #318ffb;
+}

src/App.js

@@ -6,7 +6,7 @@ import { UploadContainer } from './upload/upload';
 function App() {
   return (
     <HashRouter>
-      <Route path="/" component={AppContainer} />
+      <Route path="/" exact component={AppContainer} />
       <Route path="/upload" component={UploadContainer} />
     </HashRouter>
   );

src/index/index.js

@@ -1,12 +1,13 @@
 import { Component } from 'react';
+import { Link } from 'react-router-dom';
 import './index.css';
 
-// copilot抄来的模板
 export class AppContainer extends Component {
   render() {
     return (
       <div className="App">
-        {this.props.children}
+        <p>展示页</p>
+        <Link to="/upload" className="btn btn-primary">前往</Link>
       </div>
     );
   }

src/upload/upload.js

@@ -1,7 +1,7 @@
 import { Component } from 'react';
 import './upload.css';
 
-// copilot抄来的模板
+// copilot抄来的模板，可恶怎么有这么明显的bug啊
 export class UploadContainer extends Component {
   constructor(props) {
     super(props);
@@ -18,10 +18,9 @@ export class UploadContainer extends Component {
   render() {
     return (
       <div className="upload-container">
-        <input type="file" onChange={this.handleChange} />
-        {this.state.files.map((file, i) => (
+        <input type="file" onChange={this.handleChange} multiple />
+        {Array.prototype.map.call(this.state.files, (file, i) => (
           <div key={i} className="upload-item">
-            <img className="upload-item-img" src={file.preview} />
             <p className="upload-item-name">{file.name}</p>
           </div>
         ))}