Question

我的问题很简单但是很复杂。我正在尝试从react-router（V 4.xx）上的多个组件中加载单个组件。但是它没有加载。假设我在'localhost:3000/posts'路由中有帖子并且只有一页帖子将是'localhost:3000/posts/102'或'localhost:3000/posts/:id'。但单个页面未加载。.

我正在使用react，react-router（v4.x.x），redux，express

因此，让我们看一下server.js文件：

import express from 'express';
import path from 'path';

import webpack from 'webpack';
import webpackMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import webpackConfig from '../webpack.config.dev.js';

const app = express();
const compiler = webpack(webpackConfig);
app.use(webpackMiddleware(compiler, {
    hot: true,
    publicPath: webpackConfig.output.publicPath,
    noInfo: true
}));
app.use(webpackHotMiddleware(compiler));
app.get('/*', (req, res) => {
    res.sendFile(path.join(__dirname, '/index.html'));
});
app.listen(3000, ()=> console.log('Running on localhost:3000'));

，也是index.js页面上Router的一部分：

import React from 'react';
    import { render } from 'react-dom';


    import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
    import { Provider } from 'react-redux';
    import Exchange from './Components/Exchange';
    import {Single} from './Components/Single';


    import store from './store';

    import Navbar from './Components/Navbar';
    import './Components/css/dark.css';
    import './Components/css/bootstrap.css';
    import './Components/css/style.sass';

    const app = (
        <Provider store={store}>
            <Router>
                <Navbar />
                <Switch>
                    <Route exact path="/" component={Exchange} />
                    <Route path="/exchange" component={Exchange} />
                    <Route path="/exchange/:id" component={Single} />
                </Switch>
            </Router>
        </Provider>
    )
    render(app, document.getElementById('app'));

    if(module.hot) {
        module.hot.accept();
    }

和single.js文件

import React, { Component } from 'react';

    export class Single extends Component {
        render() {
            return (
                <div>
                    <h1>Single page</h1>
                    <h1>Single page</h1>
                    <h1>Single page</h1>
                    <h1>Single page</h1>
                </div>
            );
        }
    }

所有其他东西都可以正常工作。但是一个问题是单个组件没有加载。如果我重新加载localhost:3000/posts/102，控制台将显示：main.js:1 Uncaught SyntaxError: Unexpected token <

用Express渲染React Router中的单个组件不起作用

0 个答案: