反応ルータを正しく使用するには

Question

反応があり、ライブラリが好きですが、ルータであらゆる種類の頭痛に冒されています。ここで

は私の現在のコードで、質問は以下の通りです：

// routes.js今

var React = require('react'); 
var ReactDOM = require('react-dom'); 
import {Router, Route, IndexRoute, browserHistory} from 'react-router'; 

import App from './App'; 
import MainLayout from './components/MainLayout'; 
import Home from './components/home/Home'; 
import Product from './components/product/Product'; 
import Category from './components/category/Category'; 
import Cart from './components/cart/Cart'; 
import NotFound from './components/NotFound'; 

export default (
    <Router history={browserHistory}> 
    <Route component={App} > 
     <Route path='/' component={Home} /> 
     <Route path='/product/:productId' component={Product} /> 
     <Route path='/category/:catNumber' component={Category} /> 
     <Route path='/cart' component={Cart} /> 
    </Route> 
    <Route path='*' component={NotFound} /> 
    </Router> 
) 

、私は私は多分私はちょうどひどく誤解だと思わせる三の大問題を、持っていますルーターの仕組み

1）奇妙なURLは、彼らがすべきではないにもかかわらず、私はすでに設定しているように、[http://localhost:3002/#/?_k=xv1opy]を反応からハッシュ歴史= {browserHistory}

2）ブラウザのコンソール警告： "警告：場所"/"どのルートにも一致しませんでした"と "警告：あなたは変更できません;無視されます。"ここで何が起こっているのかわからない、私は非常に明確にホームコンポーネントをpath = '/'のためにレンダリングするように定義した。

3）おそらく関連していますが、ルートを変更すると、アプリケーション全体がリロードされ、すべての店舗データがクリアされます。理想的ではありませんが、＃1と（特に）＃2を修正するとこれが修正できると思います。役に立つかもしれない

詳細情報：

は//（）メソッド

render() { 
return (
    <div> 
    <Header /> 
    <Subheader /> 
    {this.props.children} 
    <Footer /> 
    </div> 
); 

}を

// index.js

'use strict'; 

import React from 'react'; 
import ReactDOM from 'react-dom'; 

import Routes from './routes'; 

if (process.env.NODE_ENV !== 'production') { 
    window.React = React; 
} 

ReactDOM.render(Routes, document.getElementById('main')); 

誰でもaをレンダリングapp.js私はここで正しい方向に向けることができるリアクトに精通していますか？これで過去2日間私の髪を引っ張っていて、反応ルータ上のすべてのガイドを無駄にしているように見えました。

Answer 1

ルーティングに問題があります。代わりにこれを試してみてください：

<Router history={browserHistory}> 
    <Route path='/' component={App} > 
    <IndexRoute component={Home} /> 
    <Route path='product/:productId' component={Product} /> 
    <Route path='category/:catNumber' component={Category} /> 
    <Route path='cart' component={Cart} /> 
    </Route> 
    <Route path='*' component={NotFound} /> 
</Router> 

これは、すべてではないにしても、ほとんどのエラーを解決するはずです。