Question

我正在尝试使用反应路由器来拥有动态配置文件页面，最好是用斜杠而不是像？ URL中的参数通配符。如果有意义的话，我正在寻找/profile/{username}/而不是/profile?user={username}。

这是我尝试实现这一目标的路线;

<Route path="/profile/:name/" component={Profile}/>

但是，当我尝试像`/ profile / jeff /＆＃39;那样去这条路线时或者它返回一个bundle.js（webpack＆＃39; d）这是一个空白的HTML模板，它在bundle.js中是意外的，并抛出一个错误。我有什么想法可以解决这个问题吗？感谢。

这是返回的bundle.js;

<html>
<body style="margin:0px; padding: 0px;">
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
    <div id = "root" style="margin:0px; padding: 0px;"></div>
    <script src="bundle.js"></script>
</body>

个人资料组件;

import React from 'react';
import styles from './profile.scss';
import astyles from './allpages.scss';

export default class Profile extends React.Component{
render(){

    console.log("hello!");

    const { match, location, history } = this.props

    console.log(location);
    console.log(match);
    console.log(history);

    return(
        <div className = {styles.borderContainer}>
            <p> {this.props.param.name} </p>
        </div>
    )
}
}

Webpack配置;

var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
require('style-loader');
require('css-loader');

const loaders = {
    css: {
        loader: 'css-loader'
    },
    postcss: {
        loader: 'postcss-loader',
        options: {
            plugins: (loader) => [
                autoprefixer({
                    browsers: ['last 2 versions']
                })
            ]
        }
    },
    sass: {
        loader: 'sass-loader',
        options: {
            indentedSyntax: true,
            includePaths: [path.resolve(__dirname, './src/app')]
        }
    }
}


module.exports = {
    context: __dirname,
    entry: './src/app/index.js',
    output: {
        path: __dirname + '/dist/',
        filename: 'bundle.js',
        libraryTarget: 'umd'
    },
    devtool: "sourceMap",
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',

                    // Could also be write as follow:
                    // use: 'css-loader?modules&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'
                    use: [
                        {
                            loader: 'css-loader',
                            query: {
                                modules: true,
                                localIdentName: '[name]__[local]___[hash:base64:5]'
                            }
                        },
                        'postcss-loader'
                    ]
                }),
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',

                    // Could also be write as follow:
                    // use: 'css-loader?modules&importLoader=2&sourceMap&localIdentName=[name]__[local]___[hash:base64:5]!sass-loader'
                    use: [
                        {
                            loader: 'css-loader',
                            query: {
                                modules: true,
                                sourceMap: true,
                                importLoaders: 2,
                                localIdentName: '[name]__[local]___[hash:base64:5]'
                            }
                        },
                        'sass-loader'
                    ]
                }),
            },
        ],
    },
    plugins: [
        new ExtractTextPlugin('styles.css'),
    ],
}

Answer 1

当您请求/profile/jeff/时，您提供的是您发布的index.html，并且可能是针对您服务器上不存在的每种资源（作为后备）。在index.html中，您有以下脚本标记：

<script src="bundle.js"></script>

这是一条相对路径。您实际上是在此时请求/profile/jeff/bundle.js，因为它不存在，您最终会将index.html作为捆绑服务，这是有问题的，因为它不是有效的JavaScript。< / p>

无论当前网址如何，您都应始终使用/bundle.js。同样，您始终需要/styles.css用于CSS。

<link rel="stylesheet" href="/styles.css">
<script src="/bundle.js"></script>

Answer 2

我没有更好的来源，但开发服务器需要配置为处理React Routers动态路由，因为它应该始终提供相同的html文件（index.html），因为它是SPA。

https://redux.js.org/docs/advanced/UsageWithReactRouter.html

编辑：

特别是，我认为你在webpack配置中缺少这个

devServer: {
  historyApiFallback: true
}

编辑2：

对于ExpressJS，你需要这样的东西，

app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, 'index.html'))
})

Answer 3

看起来它是你的样式表包含。我的理解是你应该在你的组件中使用babel import语句，而不是链接标签，否则它们会导致你看到的错误。

React Router URL引发参数错误

3 个答案: