When use
npm start
Pages routed from Feed to NewPost is ok.
when
npm run build
and deployed in live server,It can’t route from Feed to NewPost, the error is:
Cannot GET /new-post
my package.json is:
{
"name": "minitwitter",
"version": "0.1.0",
"private": true,
"dependencies": {
"@plasmicapp/react-web": "^0.2.94",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.0.1",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.4.1",
"@types/node": "^17.0.24",
"@types/react": "^18.0.5",
"@types/react-dom": "^18.0.1",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"typescript": "^4.6.3",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts 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"
]
}
}
App.js is:
import React from 'react';
import './App.css';
import { BrowserRouter as Router, useRoutes} from 'react-router-dom';
import NewPost from './components/NewPost';
import Feed from './components/Feed';
const GetRoutes = () => {
const routes = useRoutes([
{
path:'/',
element: <Feed />
},
{
path:'/new-post',
element: <NewPost />
},
{
path: '*',
element: <div>404没有这个网页</div>
}
]);
return routes;
}
function App() {
return (
<Router>
<GetRoutes />
</Router>
);
}
export default App;