如何在reactjs中使用没有webpack的react router js？

Question

我是 reactjs 新手。我正在努力设置路线更改。没有 webpack 的路由器更改事件有什么简单的解决方案吗？

var PageOne = React.createClass({
  render: function() {
      return (
        <h2>Page 1</h2>
      );
    }  
});
var PageTwo = React.createClass({
  render: function() {
      return (
        <h2>Page 2</h2>
      );
    }  
});
var PageThree = React.createClass({
  render: function() {
      return (
        <h2>Page 3</h2>
      );
    }  
});

Answer 1

您可以使用react-router-dom 中的HashRouter，它更易于使用（在我看来），即使在重新加载页面后也可以使用。
这里举个例子：

• 首先，安装 React Router v4：npm install --save react-router-dom
• 然后在您的索引或父组件中使用此代码：

import { HashRouter, Route, Switch } from 'react-router-dom'
const App = () => (
  <HashRouter>
    <Switch>
      <Route path='/page1' component={PageOne} />
      <Route path='/page2' component={PageTwo} />
      <Route path='/page3' component={PageThree} />
    </Switch>
  </HashRouter>
)

• 以下是导航组件的示例：

import { Link } from 'react-router-dom'
const Nav = () => (
  <div>
    <Link to='/page1'>Page1</Link>
    <Link to='/page2'>Page2</Link>
    <Link to='/page3'>Page3</Link>
  </div>
)

Answer 2

React-router 的简单机制如下：

import { Router, Route, Switch } from 'react-router-dom';

// inside your parent component add routs
<Switch>
   <Route path="/page1" exact render={<PageOne>} />
   <Route path="/page2" exact render={<PageTwo>} />
   <Route path="/page3" exact render={<PageThree>} />
</Switch>

// connect your parent component with Router
<Router history={history}>
  <AppConnected />
</Router>