文章/答案/技术大牛

发布

社区首页 >问答首页 >react-router-dom在express和react的组合中不起作用

问react-router-dom在express和react的组合中不起作用
EN

Stack Overflow用户

提问于 2019-09-02 22:12:21

回答 1查看 76关注 0票数 0

我想用react创建一个前端，用express创建一个后端。

我也想同时运行它。(如果您在实际的开发环境中分别使用express和react，如果您能告诉我一个网址以及如何配置它的示例，我将不胜感激。)

所以我想找到一个很好的库，叫做webpack-dev-server，并利用它。

因此，我使用以下配置完成了一个react项目。

然而，由express制作的后端服务器工作正常，但由react制作的前端服务器似乎无法工作。

├── build
├── ./package.json
├── ./public
│   ├── ./public/bundle.js
│   ├── ./public/favicon.ico
│   ├── ./public/index.html
├── ./server
│   └── ./server/index.js
├── ./src
│   ├── ./src/components
│   │   ├── ./src/components/About.js
│   │   ├── ./src/components/Header.js
│   │   ├── ./src/components/Home.js
│   │   └── ./src/components/NoMatch.js
│   ├── ./src/App.css
│   ├── ./src/App.js
│   ├── ./src/index.css
│   ├── ./src/index.js
│   └── ./src/serviceWorker.js
├── ./.babelrc
├── ./webpack.config.js
├── ./webpack.dev.config.js
└── ./yarn.lock

服务器代码很简单。

import webpack from 'webpack';
import WebpackDevServer from 'webpack-dev-server';
import 'babel-polyfill';

const express = require('express');
const app = express();
const port = 3000;
const devPort = 3001;

if(process.env.NODE_ENV == 'development') {
    console.log('Server is running on development mode');

    const config = require('../webpack.dev.config');
    let compiler = webpack(config);
    let devServer = new WebpackDevServer(compiler, config.devServer);
    devServer.listen(devPort, () => {
    console.log('webpack-dev-server is listening on port', devPort);
    });
}

app.locals.pretty = true;

app.use('/', express.static(__dirname + '/../public'));

app.use('/api/getList',(req, res) => {
    const result = [
        { id: 1, name: 'Steve', age: 20 },
        { id: 2, name: 'Steve', age: 20 },
        { id: 3, name: 'Steve', age: 20 },
        { id: 4, name: 'Steve', age: 20 },
        { id: 5, name: 'Steve', age: 20 },
        { id: 6, name: 'Steve', age: 20 }
    ];
    return res.json(result);
});

app.listen(port, () => {
  console.log('Server Running on port 3000');
});

这是components文件夹下的Header.js中的代码。

import React, { Component } from 'react';

class Home extends Component {
    render() {
        return(
            <ui>
                <li><a href='/'>Home</a></li>
                <li><a href='/about'>About</a></li>
            </ui>
        );
    }
}
export default Home;

这段代码来自Home.js。

其他组件的代码如下所示。

import React, { Component } from 'react';

class Home extends Component {
    render() {
        return(
            <h1>Home</h1>
        );
    }
}
export default Home;

根据您是否在App.js代码中使用了react-router-dom，主页可能是可见的，也可能是不可见的。

import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Header from './components/Header';
import Home from './components/Home';
import About from './components/About';
import NoMatch from './components/NoMatch';
import './App.css';

class App extends Component {
    render() {
        return (
            <BrowserRouter>
                <Header/>
                <Switch>
                    <Route exact path="/" component={Home} />
                    <Route path="/about" component={About} />
                    <Route component={NoMatch} />
                </Switch>
            </BrowserRouter>
        );
    }
}

export default App;

这是webpack.dev.config.js的内容

var path = require("path");
var webpack = require('webpack');

module.exports = {
    entry: [
        './src/index.js',
        'webpack-dev-server/client?http://0.0.0.0:3001',
        'webpack/hot/only-dev-server'
    ],
    devtool: 'inline-source-map',
    mode:'development',
    output: {
        path: __dirname + '/',
        filename: 'bundle.js'
    },
    devServer: {
        hot: true,
        filename: 'bundle.js',
        publicPath: '/',
        historyApiFallback: true,
        contentBase: './public',
        proxy: {
            "**": "http://localhost:3000"
        }
    },
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
    ],
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                },
            },
            {
                test: /\.css$/,
                use: [{
                    loader: 'style-loader' ,
                }, {
                    loader: 'css-loader',
                }]
            },
            {
                test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        name: '[hash].[ext]',
                        limit: 10000,
                    },  
                }]
            },

        ]
    },
    resolve: {
      extensions: ['.js', '.jsx']
    },
};

我会告诉你我的github有更多的代码。你也可以在这里回复一个问题。https://github.com/Mineru98/react-express

reactjs

express

react-router-dom

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-09-02 22:31:40

您需要在Header组件中使用Link组件，而不是直接使用锚点。

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

class Header extends Component {
  render() {
    return(
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
      </ul>
    );
  }
}
export default Header;

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57758439

复制

相似问题

问react-router-dom在express和react的组合中不起作用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问react-router-dom在express和react的组合中不起作用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问react-router-dom在express和react的组合中不起作用
EN