如何在ReactJS中使用没有Webpack的React路由器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>