Question

我使用React创建了一个简单的应用程序，然后运行
python -m SimpleHTTPServer 8088检查路由是否正常。 http://0.0.0.0:8088/按预期向我展示了一个Landing.js组件，但是当转到此地址时：http://0.0.0.0:8088/products - 我希望看到一个Products.js组件呈现，但它显示了root溃败。
这是路由应用程序的代码：

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'))

Answer 1

Route元素中匹配模式的正确道具是路径，而不是模式：

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

请参阅API文档：https://reacttraining.com/react-router/#route

为什么在我的应用[React-router v4-beta5]路由不起作用？

1 个答案: