2017-02-13 10 views
0

Reactを使って簡単なアプリを作成し、ルーティングが正常に機能するかどうかを確認するために
python -m SimpleHTTPServer 8088を実行してください。 http://0.0.0.0:8088/はLanding.jsコンポーネントを期待通りに見せてくれましたが、このアドレスに行くと、http://0.0.0.0:8088/products - Products.jsコンポーネントがレンダリングされていることが予想されましたが、ルートルーティンが表示されました。ここ
ルーティングアプリのコードです:私のアプリで[React-router v4-beta5]ルーティングが動作しないのはなぜですか?

import React from 'react' 
import { render } from 'react-dom' 
import Route from 'react-router-dom/Route' 
import BrowserRouter from 'react-router-dom/BrowserRouter' 
import Switch from 'react-router-dom/Switch' 
import Landing from './Landing' 
import Products from './Products' 
import NoMatch from './NoMatch' 

import 'bootstrap/dist/css/bootstrap.css' 

const App = React.createClass({ 
    render() { 
    return (
     <BrowserRouter> 
     <div className='app'> 
      <Switch> 
      <Route exact pattern='/' component={Landing} /> 
      <Route pattern='/products' component={Products} /> 
      <Route component={NoMatch} /> 
      </Switch> 
     </div> 
     </BrowserRouter> 
    ) 
    } 
}) 

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

答えて

1

ルート要素であなたのマッチングパターンの正しい小道具がパスある、ないパターン

<Route exact path='/' component={Landing} /> 
<Route path='/products' component={Products} /> 
<Route component={NoMatch} /> 

は、APIドキュメントを参照してください:https://reacttraining.com/react-router/#route

関連する問題