react-router - 单独的文件

Question

所以我有以下app.js

import React from 'react'
import { render } from 'react-dom'
import { BrowserRouter, Match, Miss, Link } from 'react-router'

//import Jobs from './modules/Jobs'
//import Job from './modules/Job'

const App = () => (
  <BrowserRouter>
    <div>
      <ul>
        <li><Link to="/">Main</Link></li>
        <li><Link to="/jobs">Jobs</Link></li>
      </ul>

      <hr/>

      <Match exactly pattern="/" component={Main} />
      <Match pattern="/jobs" component={Jobs} />
    </div>
  </BrowserRouter>
)


const Jobs = ({ pathname }) => (
  <div>
    <h2>Jobs</h2>
    <ul>
      <li><Link to={`${pathname}/job1`}>job1</Link></li>
      <li><Link to={`${pathname}/job2`}>job2</Link></li>
      <li><Link to={`${pathname}/job3`}>job3</Link></li>
    </ul>

    <Match pattern={`${pathname}/:jobId`} component={Job}/>
    <Match pattern={pathname} exactly render={() => (
      <h3>Please select a job</h3>
    )}/>
  </div>
)

render(<App/>, document.querySelector('#root'))

效果很好。

如何将此位放在单独的文件中？

const Jobs = ({ pathname }) => (
  <div>
    <h2>Jobs</h2>
    <ul>
      <li><Link to={`${pathname}/job1`}>job1</Link></li>
      <li><Link to={`${pathname}/job2`}>job2</Link></li>
      <li><Link to={`${pathname}/job3`}>job3</Link></li>
    </ul>

    <Match pattern={`${pathname}/:jobId`} component={Job}/>
    <Match pattern={pathname} exactly render={() => (
      <h3>Please select a job</h3>
    )}/>
  </div>
)

我想要一个名为modules的文件夹，如下所示：

• 模块

  • Main.js

  • Jobs.js

  • Job.js

  • 等

我曾经做过这样的事情：

//Jobs.js
import React from 'react'

export default React.createClass({
  render() {
    return (
      <div>
        <h2>Jobs</h2>
      </div>
    )
  }
})

然后我会将其添加到我的app.js中：import Jobs from './modules/Jobs'

但由于我是React的新手，我不确定语法......