react-router-dom - direkt zur Route navigieren

Question

Wenn ich react-router-dom verwende, sollte ich in der Lage sein, eine Route zu erstellen und zu ihr zu navigieren, indem ich ihren Pfad manuell in die URL eintrage?

const App =() => 
<Provider store={store}> 
    <Router> 
     <div> 
      <Route exact path="/" component={QuotesLandingPage} /> 
      <Route path="/prequote" component={LoadingSpinner} /> 
     </div> 
    </Router> 
</Provider>; 

So werde ich auf localhost, und wenn ich manuell ‚/prequote‘ eingeben, um das Ende der url im navbar es nicht auf die Komponente nicht leitet ich angegeben habe, stattdessen wirft sie ein 404.

Ist das erwartete Verhalten?

Ich habe nach einer Antwort gesucht und einige Vorschläge gesehen, dass die Konfiguration von Webpack (ich verwende Webpack) devServer.historyApiFallback = true sollte funktionieren, aber es hat nicht für mich gearbeitet.

Answer 1

Ja, Sie können zu jedem definierten Pfad navigieren, indem Sie seinen Pfad manuell in die URL eingeben. Zum Beispiel: Im folgenden Code habe ich zwei Komponenten Dashboard und Informationen erstellt und ich habe react-router-dom verwendet, um Routing-Funktionalität in meiner App bereitzustellen. Mit dem folgenden Code können Sie zu der jeweiligen Komponente navigieren. Wenn Sie http://server:port/dashboard eingeben wird es Sie zu Dashboard-Komponente navigieren und wenn Sie http://server:port/information treten wird wird es Ihnen

App.js

import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; 
import React from 'react'; 
import Dashboard from './Dashboard.js'; 
import Information from './Information.js'; 

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {open: false}; 
    this.state = {message: "StackOverflow"}; 
    } 
render(){ 
    return (
     <Router> 
      <div> 

      <Route exact path="/dashboard" render={props => <Dashboard {...props} />} /> 
      <Route exact path="/information" render={props => <Information {...props} />} /> 
      </div> 
     </Router> 
    ); 
} 

} Datei

Dashboard Informationskomponente navigieren .js

import React from 'react'; 


class Dashboard extends React.Component { 

    render() { 

    return (
      <div ><h1> Hello React</h1></div> 
    ); 
    } 
} 

export default Dashboard; 

Information.js

import React from 'react'; 


class Information extends React.Component { 

    render() { 

    return (
      <div ><h1> Hello React-Router-DOM</h1></div> 
    ); 
    } 
} 

export default Information; 

Ich hoffe, dass es Ihnen helfen.

Answer 2

Vielleicht haben Sie die gleiche Verwirrung über historyApiFallback wie ich einmal getan habe. Ich zitiere aus https://webpack.github.io/docs/webpack-dev-server.html#the-historyapifallback-option:

Wenn Sie jedoch output.publicPath in Ihrer Webpack Konfiguration geändert haben, müssen Sie die URL angeben, die umgeleitet werden. Dies geschieht mit der Option historyApiFallback.index.

historyApiFallback: { 
    index: '/foo-app/' 
} 

In meinem Fall habe ich endlich es durch Änderung der historyApiFallback Option:

historyApiFallback: { 
    index:'dist/' 
}, 

betrachten es als Index: 'dist/index.html', bedient zu werden anstelle des DevServers werfen 404.

Cheers