react-router-dom 4ルーティング質問

Question

私はreact-router-dom 4を使用しようとしていますが、ルートに直接ナビゲートできません。私はちょうどlocalhost:3000/aboutへ行くしようとすると、私はブラウザでが見つかりませんを取得

let Test = (props) => (<div>This is a test component</div>); 
 
let About = (props) => (<div>About us</div>); 
 

 
class App extends Component { 
 
    render() { 
 
    return (
 
     <Router> 
 
     <div> 
 
      <nav> 
 
      <NavLink to="/about" activeClassName="selected">About</NavLink> 
 
      <NavLink to="/" activeClassName="selected">Test</NavLink> 
 
      </nav> 
 
      <Route exact path="/" component={Test} /> 
 
      <Route exact path="/about" component={About} /> 
 
     </div> 
 
     </Router> 
 
    ) 
 
    } 
 
}

：

は、ここに私のコードのサンプルです。しかし、私がちょうどlocalhost:3000に行くと、について約のリンク、私はちょうどうまくリダイレ​​クトされます。私のコンソールで

、私は私はあなたがWebPACKのを使用していると仮定してい

Uncaught Error: uBlock Origin: aborting content scripts for http://localhost:3000/about at contentscript.js:90

Answer 1

を取得します。もしそうなら、Webpackの設定にいくつか追加して問題を解決する必要があります。具体的には、output.publicPath = '/',devServer.historyApiFallback = trueである。 ^の両方を使用し、私のためにリフレッシュの問題を修正するwebpackの設定例を以下に示します。あなたが好奇心が強いなら "なぜ"、thisが役に立ちます。

var path = require('path'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    entry: './app/index.js', 
    output: { 
    path: path.resolve(__dirname, 'dist'), 
    filename: 'index_bundle.js', 
    publicPath: '/' 
    }, 
    module: { 
    rules: [ 
     { test: /\.(js)$/, use: 'babel-loader' }, 
     { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]} 
    ] 
    }, 
    devServer: { 
    historyApiFallback: true, 
    }, 
    plugins: [ 
    new HtmlWebpackPlugin({ 
     template: 'app/index.html' 
    }) 
    ] 
}; 

Answer 2

あなたがローカルホストに行く：3000 /について、それが実行するサーバ側のルートだと、あなたは404を得たので、あなたは、サーバー側のルートを設定しないでください。あなただけのローカルホストに行くとき：3000、 [About]リンクをクリックすると、設定したクライアントルートが実行されます。言い換えれば、それは反応ルータのDOMを実行しているので、あなたはページを入手することができます