Question

大家好，我很难让它开始工作。当请求的React-Router从那时起接管Express时，Express只能加载一次索引页面。

表达代码：

const express = require('express');
const mongoose = require('mongoose');
const session = require('express-session');
const path = require('path');
const db = require('./config/keys').MONGOURI;

const app = express();
const router = express.Router();

mongoose.connect(db, { useNewUrlParser: true })
  .then(() => {
    console.log('MongoDB Connected');
  })
  .catch(err => console.log(err));

// req.body kan hierdoor json zijn
app.use(express.urlencoded({ extended: true }));

// Express session middleware
app.use(session({
  secret: 'secret',
  resave: true,
  proxy: true,
  saveUninitialized: true,
}));

app.use(express.static(path.join(__dirname, 'frontend/dist')));
// static route loading index.html from there react.router takes over
// it is just offering the index.html file
router.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'frontend/dist/index.html'));
});


// process.env werkt op elk platform
const PORT = process.env.PORT || 5000;
app.listen(PORT, console.log(`Express server is running on port ${PORT}`));

after this the app component should be rendered

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunkMiddleware from 'redux-thunk';
import { createLogger } from 'redux-logger';
import rootReducer from './redux/reducers';
import App from './containers/App';

const loggerMiddleware = createLogger();
// store
const store = createStore(
  rootReducer,
  applyMiddleware(
    thunkMiddleware,
    loggerMiddleware,
  ),
);

render(
  <Provider store={store}>
<Router>
  <App />
</Router>
  </Provider>,
  document.getElementById('root'),
);

应用程序组件只是路由到家庭组件和登录组件作为后备404页面

index.js（前端首次加载）

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunkMiddleware from 'redux-thunk';
import { createLogger } from 'redux-logger';
import rootReducer from './redux/reducers';
import App from './containers/App';

const loggerMiddleware = createLogger();
// store
const store = createStore(
  rootReducer,
  applyMiddleware(
    thunkMiddleware,
    loggerMiddleware,
  ),
);

render(
  <Provider store={store}>
    <Router>
      <App />
    </Router>
  </Provider>,
  document.getElementById('root'),
);

所有组件均未加载。向应用程序加载中添加h1。我觉得Express一直在为索引页面提供服务。

应用程序组件：

import React from 'react';
import { Route, Switch, Link } from 'react-router-dom';
import NotFound from './NotFound';
import Login from './Login';

const Home = () => <h2>this is the homepage</h2>;

class App extends React.Component {
  render() {
    return (
      <Switch>
        <Route exact path="/" Component={Home} />
        <Route path="/login" Component={Login} />
        <Route component={NotFound} />
      </Switch>
    );
  }
}

export default App;

express将用作保存用户和处理其他数据的api。

Answer 1

将您的Switch更改为以下内容。注意上面代码中的小写字母。

<Switch>
    <Route path="/login" component={Login} />
    <Route path="/" component={Home} />
    <Route component={NotFound} />
</Switch>

我通过自行测试以确保其正常工作（确定快递之前）来修复它。这是我的测试文件。

const Home = () => {
    console.log("home")
    return <h2>this is the homepage</h2>
};
const Login = () => {
    console.log("login")
    return <h2>this is the loginpage</h2>
};
class App extends React.Component {
    render() {
        console.log("here", this.props);
        return (
            <div>
                <h1>Test</h1>
                <Link to="/login">Login</Link>
                <Link to="/">Home</Link>

                <Switch>
                    <Route path="/login" component={Login} />
                    <Route path="/" component={Home} />
                </Switch>
            </div>
        );
    }
}

const Index = () => (
    <Provider store={store}>
        <Router>
            <App />
        </Router>
    </Provider>
);

export default Index;

希望有帮助

Answer 2

确保您聪明地使用“精确”道具。

React-router-dom不渲染组件（express，react，redux，mongodb）

2 个答案: