sem*_*ira 6 reactjs react-router
我正在使用react.js但不使用节点服务器.我需要一个路由解决方案,但似乎反应路由器正在与节点一起工作.如果不是,请举例说明如何集成反应路由器.如果不是我需要另一个使用反应的路由器.
在这里建立@semira是我如何实现无构建反应应用程序.
在./index.html(或./index.php在我的情况下)我们加载React库,React路由器和Babel转换器,它将转换ES6 javascript,以便浏览器可以解释它.请注意,您必须明确说明脚本类型text/babel,以便Babel转换器转换ES6 javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React App Boilerplate</title>
<!-- Foundation 6.3.0 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.min.js"></script>
</head>
<body>
<div id="app"></div>
<!------------------------------------------------------------------------------------------------------------------>
<!-- Dependencies -->
<!------------------------------------------------------------------------------------------------------------------>
<!-- Babel ES6 to ES5 Transpiler -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<!-- React Library -->
<script src="https://unpkg.com/react@15.4.1/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15.4.1/dist/react-dom.min.js"></script>
<!-- React Router -->
<script src="https://unpkg.com/react-router/umd/ReactRouter.min.js"></script>
<!------------------------------------------------------------------------------------------------------------------>
<!-- React Components -->
<!------------------------------------------------------------------------------------------------------------------>
<script type="text/babel" src="app/components/App.js"></script>
<script type="text/babel" src="app/components/About.js"></script>
<!-- Application entry point -->
<script type="text/babel" src="app/app.js"></script>
</body>
</html>
./app/components/About.js在ES6中编写的无状态React组件在哪里:
const About = () => <h2>About Page</h2>;
./app/components/App.js在ES6中编写的React组件在哪里:
class App extends React.Component {
render() {
return (
<div>
<h2>App Page</h2>
</div>
);
}
}
然后.app/app.js通知我们如何通过将ReactDOM和ReactRouter存储为引用来使代码看起来像文档.
let render = ReactDOM.render;
let browserHistory = ReactRouter.browserHistory;
let Router = ReactRouter.Router;
let Route = ReactRouter.Route;
let IndexRoute = ReactRouter.IndexRoute;
let Link = ReactRouter.Link;
render((
<Router history={browserHistory}>
<Route path="/" component={App}>
<Route path="about" component={About} />
</Route>
</Router>
), document.getElementById('app'))
React 可以与任何返回 HTML 文件的服务器一起使用。html 文件包含一个 JS 文件，如下所示：
import React from 'react';
import ReactDOM from 'react-dom';
import Root from './js/containers/root';
import createBrowserHistory from 'history/lib/createBrowserHistory';
const history = createBrowserHistory();
ReactDOM.render(
<Root history={ history } />,
document.getElementById('app')
);
路由可以由react-router管理，如下所示：
import React, {PropTypes, Component} from 'react';
import { IndexRoute, Router, Route } from 'react-router';
import { Provider } from 'react-redux';
import COMPONENTa from './ComponentA';
import COMPONENTb from './ComponentB';
import COMPONENTc './ComponentC';
class Root extends Component {
render() {
const { history } = this.props;
return (
<Router history={ history }>
<Route path="/PATH/PATH/" component={ COMPONENTa }>
<IndexRoute component={ COMPONENTb } />
<Route path="PARAMS/:id" component={ COMPONENTc } />
</Route>
</Router>
);
}
}
Root.propTypes = {
history: PropTypes.object.isRequired
};