React-router-dom не рендеринг компонентов (экспресс, реагирование, редукс, mongodb)

Question

Привет всем У меня проблемы с тем, чтобы заставить это работать.Экспресс должен загружать страницу индекса только один раз, когда запрошенный реагирующий маршрутизатор вступит во владение с тех пор.

экспресс-код :

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 в приложение загружается.Я чувствую, что экспресс продолжает обслуживать страницу индекса ..

Компонент приложения:

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

Убедитесь, что вы правильно используете «точную» опору.

Answer 2

Измените 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;

Надеюсь, что поможет