React-Router, wie man die Links mit der aktuellen Seite verknüpft

Edit: Ich habe herausgefunden, dass der Browser versucht, die Datei namens "pricing" zu finden, wie kann ich den Browser nicht tun und schauen für index.html? Ich laufe auf webpack-dev-serverReact-Router, wie man die Links mit der aktuellen Seite verknüpft

Edit2: Ich bekomme es jetzt ein bisschen, ich möchte localhost: 8080/pricing direkt zu index.html gehen, dann durch den Router laufen und an die Preiskomponente, wie kann ich das machen?

Ich habe auf einer Website React-Router eingerichtet, aber wenn direkt eine bestimmte Seite zugreifen (zB: localhost: 8080/pricing), es gibt mir die folgenden Fehler:

Content Security Policy: The page’s settings blocked the loading of a resource at blob:http://localhost:7080/685880ef-cf95-4ccf-a6f6-3d8c182ee941 (“default-src http://localhost:7080”). 
Content Security Policy: The page’s settings blocked the loading of a resource at self (“default-src http://localhost:7080”). Source: ;(function installGlobalHook(window) {...

Hier ist mein Code für die Seite

ReactDOM.render(
    <BrowserRouter> 
    <App/> 
    </BrowserRouter> 
    , 
    document.getElementById('app')); 

export default class App extends React.Component { 
    render(){ 
    return (
     <div> 
     <Header/> 
     <Body/> 
     <Footer/> 
     </div> 
    ); 
    } 
} 

class Body extends React.Component { 
    render(){ 
    return (
     <Switch> 
     <Route exact path='/' component={Home}/> 
     <Route path='/pricing' component={Pricing}/> 
     <Route path='/contactus' component={ContactUs}/> 
     <Route path='/buy' component={Buy}/> 
     </Switch> 
    ); 
    } 
}

Beachten sie, dass es funktioniert, wenn ich die Hauptseite direkt zugreifen, wenn ich auf localhost gehen: 8080 dann meine Links verwenden, um zwischen den anderen Seiten

Quelle

2017-12-28 SirSoDerp

Haben Sie sich eines dieser Bilder angesehen? [Inhalt Sicherheitsrichtlinie die Seiten Einstellungen blockiert das Laden von Ressourcen] (https://stackoverflow.com/questions/33453405/content-security-policy-the-pages-settings-blocked-the-loading-of-a -resource-a) [Inhalt Sicherheitsrichtlinie die Seiten Einstellungen blockiert das Laden einer Ressource] (https://stackoverflow.com/questions/37298608/content-security-policy-the-pages-settings-blocked-the-loading -of-a-resource) – ToddB

Nicht das selbe Problem wie meins, ich sollte meinen Titel aktualisieren und mich ein bisschen mehr umsehen, weil ich erkannte, dass das Problem nicht das war, was ich dachte, es war – SirSoDerp

klingt nach etwas Lustigem mit deiner Webpack-Konfiguration. Benötigen Sie eine benutzerdefinierte Konfiguration? Was, wenn du das mit create-react-app probiert hast? – azium

ich denke, der probl zu navigieren em mit webpack Konfiguration ist, müssen Sie historyApiFallback zu Ihrem devServer Abschnitt hinzuzufügen:

Diese Konfiguration ermöglicht es Ihnen, direkt zu Preis Seite zu gehen.

devServer: { 
    historyApiFallback: true, 
    host: '0.0.0.0', 
    hot: true, 
    port: 3000 
}

oder in Ihrem scripts Abschnitt (in Ihrer package.json-Datei):

"scripts": { 
    "start": "webpack-dev-server --history-api-fallback" 
}

prüfen this aus der Dokumentation zu sehen.

Quelle

2017-12-29 00:28:23

React-Router, wie man die Links mit der aktuellen Seite verknüpft

Antwort

Verwandte Themen