react-router-dom - 直接経路にナビゲート

Question

react-router-domを使用する場合、経路を作成して手動でURLにその経路を入力する必要がありますか？

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

だから、私は、ローカルホスト上になり、私は手動で私が指定したコンポーネントにリダイレクトしないnavbarでurlの末尾に「/prequote」を入力すると、代わりに404をスロー。

この動作は期待されていますか？

私は答えを探していて、012packを持っているwebpack（私はwebpackを使用しています）を設定するいくつかの提案を見ましたが、それは私のために働いていません。

Answer 1

はい、URLに手動でパスを入力することで、定義済みの任意のパスにナビゲートできます。例：次のコードでは、ダッシュボードと情報の2つのコンポーネントを作成し、私のアプリでルーティング機能を提供するためにreact-router-domを使用しました。次のコードを使用すると、特定のコンポーネントに移動できます。あなたがhttp://server:port/dashboardを入力します 場合は、ダッシュボードのコンポーネントにあなたをナビゲートし、あなたがhttp://server:port/informationを入力する場合はそれが

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> 
    ); 
} 

}

ダッシュボードのファイル情報コンポーネントにあなたをナビゲートします.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; 

。私がかつて行ったように

Answer 2

たぶん、あなたはhistoryApiFallbackについて同じ混乱を持っています。私はhttps://webpack.github.io/docs/webpack-dev-server.html#the-historyapifallback-optionから引用します：

あなたはWebPACKの構成でoutput.publicPath変更している場合は、あなたがにリダイレクトするURLを指定する必要があります。これは、historyApiFallback.indexオプションを使用して行われます。

historyApiFallback: { 
    index:'dist/' 
}, 

指標とみなし：サービスされる 'DIST/index.htmlを'を、私は最終的にそれがhistoryApiFallbackオプションを変更してしまった私の場合は

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

devServerの代わりに404を投げてください。

乾杯