我已经为我的ReactJS应用程序完成了一些路由,它在localhost中可以完美地工作。但是,当我要将其部署在Node.js服务器上时,只能访问根路径“ /”。对于其他我得到这个:
Cannot GET /dir/secret/dashboard
我很确定我做错了什么,但我不知道该怎么办。
这是我使用react-route-dom的代码:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router , Route } from 'react-router-dom';
import './index.css';
import App from './App';
import Register from './pages/Register';
import Login from './pages/Login';
import Dashboard from './pages/Dashboard';
import Settings from './pages/Settings';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<Router>
<div>
<Route exact path='/' component={App} />
<Route path='/dir/secret/login' component={Login} />
<Route path="/dir/secret/register" component={Register} />
<Route exact path="/dir/secret/dashboard" component={Dashboard} />
<Route exact path="/dir/secret/dashboard/settings" component={Settings} />
</div>
</Router>,
document.getElementById('root')
);
serviceWorker.unregister();
server.js
const express = require('express');
const server = express();
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const path = require('path');
const cron = require('node-cron');
const axios = require('axios');
const port = 4200;
const cors = require('cors');
mongoose.Promise = require('bluebird');
mongoose.connect('mongodb+srv://***:***@***-hsm29.mongodb.net/test?retryWrites=true&w=majority', {useNewUrlParser: true, useUnifiedTopology: true})
.then(() => {
console.log('> Connected to your MongoDB Cluster');
})
.catch(err => {
console.error('App starting error:', err.stack);
process.exit(1);
});
const router = require('./routes/router');
const corsOption = {
origin: '*',
optionSuccessStatus: 200,
}
server.use(express.static('public'));
server.use(cors(corsOption));
server.use(bodyParser.urlencoded({extended: true}));
server.use(bodyParser.json());
const upload = require('./upload')
server.post('/upload', upload)
const banner = require('./banner')
server.post('/banner', banner)
server.use(express.static(__dirname+'/public'));
server.use('/api', router);
server.use(express.static(path.join(__dirname, 'build')));
-server.get('/', function (req, res) {
+server.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
});
server.listen(port, function(){
console.log(`> Ready on http://localhost:${port}`);
});
感谢您的时间和帮助
好,我已经解决了我的问题。这是我所做的修改
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter} from 'react-router-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<BrowserRouter>
<App/>
</BrowserRouter>,
document.getElementById('root')
);
serviceWorker.unregister();
App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Content from './pages/Content';
import Register from './pages/Register';
import Login from './pages/Login';
import Dashboard from './pages/Dashboard';
import Settings from './pages/Settings';
import './App.css';
function App() {
return (
<>
<Router basename={process.env.PUBLIC_URL+'/'}>
<div className="App">
<Switch>
<Route exact path='/' component={Content}/>
<Route path='/dir/secret/login' component={Login} />
<Route path="/dir/secret/register" component={Register} />
<Route exact path="/dir/secret/dashboard" component={Dashboard} />
<Route exact path="/dir/secret/dashboard/settings" component={Settings} />
</Switch>
</div>
</Router>
</>
);
}
export default App;
Server.js
const express = require('express');
const server = express();
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const path = require('path');
const cron = require('node-cron');
const axios = require('axios');
const port = 4200;
const cors = require('cors');
mongoose.Promise = require('bluebird');
mongoose.connect('mongodb+srv://***:***@***-hsm29.mongodb.net/test?retryWrites=true&w=majority', {useNewUrlParser: true, useUnifiedTopology: true})
.then(() => {
console.log('> Connected to your MongoDB Cluster');
})
.catch(err => {
console.error('App starting error:', err.stack);
process.exit(1);
});
const router = require('./routes/router');
const corsOption = {
origin: '*',
optionSuccessStatus: 200,
}
server.use(express.static('public'));
server.use(cors(corsOption));
server.use(bodyParser.urlencoded({extended: true}));
server.use(bodyParser.json());
const upload = require('./upload')
server.post('/upload', upload)
const banner = require('./banner')
server.post('/banner', banner)
server.use(express.static(__dirname+'/public'));
server.use('/api', router);
server.use(express.static(path.join(__dirname, 'build')));
server.get('/*', function(req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
server.listen(port, function(){
console.log(`> Ready on http://localhost:${port}`);
});
所以我已经修改了我所有的路由,以匹配react-router-dom文档,而我只是改变了这个:
server.use(express.static(path.join(__dirname, 'build')));
-server.get('/', function (req, res) {
+server.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
对此:
server.use(express.static(path.join(__dirname, 'build')));
server.get('/*', function(req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
我很确定有更好的方法来做我想做的事,但事实是,这种方法对我有用,因此它可以帮助任何人。