React Router-URL löst Fehler mit Parameter

Ich versuche, Reverse-Router zu verwenden, um dynamische Profilseiten zu haben, vorzugsweise mit Schrägstrichen anstatt wie ein? Parameter-Platzhalter in der URL. Ich suche eher nach /profile/{username}/ als nach /profile?user={username}, wenn das Sinn macht.React Router-URL löst Fehler mit Parameter

Hier ist die Route, die ich verwende, um dies zu erreichen;

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

Aber wenn ich auf dieser Strecke versuchen und gehen, wie in `/ profile/jeff /‘ oder alles, was es gibt einen bundle.js (webpack'd), die eine leere HTML-Vorlage ist, die unerwartet zu sein in der bundle.js und löst einen Fehler aus. Irgendeine Idee ist, wie ich das beheben kann? Vielen Dank.

Hier ist die bundle.js, die zurückgegeben wird;

<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>

Profil Komponente;

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-Konfig;

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'), 
    ], 
}

Quelle

2017-11-14 Intoxicated Penguin

Bitte teilen Sie den Fehler –

'Uncaught Syntaxerror: unerwartetes Token <' –

können Sie das Profil Komponentencode teilen? – Maluen

Wenn Sie /profile/jeff/ anfordern, dienen Sie die index.html, die Sie gepostet haben, und vermutlich wird dies für jede Ressource getan, die nicht auf Ihrem Server existiert (als Fallback). Im index.html haben Sie den folgenden Skript-Tag:

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

Dies ist ein relativer Pfad. Sie fordern an dieser Stelle an, und weil das nicht existiert, enden Sie, das index.html als das Bündel zu dienen, das problematisch ist, weil es ungültiges JavaScript ist.

Sie sollten immer /bundle.js unabhängig von der aktuellen URL verwenden. Ähnlich möchten Sie immer /styles.css für Ihr CSS haben.

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

Quelle

2017-11-14 18:35:45

Das war mein Problem. Vielen Dank! –

Ich habe keine bessere Quelle für diese, aber der Entwicklungs-Server muss so konfiguriert werden, Reagieren Router dynamische Routen zu handhaben, da es immer die gleiche HTML-Datei dienen soll (index.html), weil es ein Spa .

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

Edit:

Besonders denke ich, dass Sie diese

devServer: { 
    historyApiFallback: true 
}

Edit 2 in Ihrer webpack Config fehlen:

Für Express.js Sie so etwas wie dieses brauchen würde,

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

Quelle

2017-11-14 18:18:11 Dakota

Ich sollte hinzufügen das gilt nur, wenn Sie Ihre App mit WebpackDevServer dienen, aber ich glaube, das ist hier der Fall. – Dakota

Nicht mit dem Webpackdevserver dienen. Diese spezielle Route bewirkt, dass der Inhalt von bundle.js aus irgendeinem Grund mit index.html identisch ist. Andere Routen zu anderen Komponenten tun dies nicht, und die Bundle.js ist, was es erwartet und gut lädt. –

Ich habe die genaue Aussage in Express - andere Wege funktionieren gut. Das besondere tut es nicht wenn ich den Parameter in die Route eingebaut habe. –

Es sieht so aus, als wäre es Ihre Stylesheet-Aufnahme. Mein Verständnis ist, dass Sie eine Babel-Import-Anweisung in Ihrer Komponente verwenden sollten, keine Link-Tags, sonst werden sie den Fehler verursachen, den Sie sehen.

Quelle

2017-11-14 18:18:13 catbadger

Das Einfügen von Stylesheets funktioniert in anderen Komponenten gut. –

React Router-URL löst Fehler mit Parameter

Antwort

Verwandte Themen