2017-02-13 82 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元素的匹配模式正確的道具路徑,不模式

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

見API文檔:https://reacttraining.com/react-router/#route

相關問題