2017-02-13 69 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

相关问题