React-router-dom not rendering components (express,react,redux,mongodb)

Question

Hello Everyone I'm having trouble getting this to work. Express should only load the index page once when requested react-router should take over from then.

express code :

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'),
);

the app component is just routes to a home component and a login component with as fallback a 404 page

index.js (frontend first load)

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'),
);

None of the components are getting loaded. Adding an h1 to app loads. I feel like express keeps on serving the index page..

App component:

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 will serve as an api to save users and process other data.

Answer 1

Change your Switch to below. Notice the lowercase component in the code above.

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

I fixed it by testing react on its own to make sure it work (before figuring out express). Heres my test file.

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;

Hope that helps

Answer 2

确保您智能地使用“精确”道具。