没有节点的反应路由

我正在使用react.js，但没有使用节点服务器。我需要一个路由解决方案，但似乎react-router与节点一起工作。如果不是，请举例说明如何集成反应路由器。如果没有，我需要另一个与反应工作的路由器。没有节点的反应路由

2016-03-02 semira

这是不是很清楚你在问什么。 React路由器也在客户端工作，因为它是用React组件实现的。没有要求使用节点。 –

你能给我清楚的例子吗？我不清楚如何在我的应用程序中导入和初始化反应路由器。 – semira

你遵循官方教程吗？ https://github.com/reactjs/react-router-tutorial –

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 
};

来源

2016-03-02 11:51:23

“导入从'反应'反应;”不在浏览器中工作。我也试过使用requirejs。但问题仍未解决。 – semira

这只是一个例子。它只会在你使用webpack和圣经时才起作用 –

我正在寻找一种不使用node.js的方式 – semira

终于让我找到了我的发现。感谢所有的帮助。

var routes = (
    <ReactRouter.Router> 
    <ReactRouter.Route name="app" path="/" component={App}/> 
    <ReactRouter.Route name="app" path="new" component={CreateApp}/> 
    </ReactRouter.Router> 
); 


ReactDOM.render(
    <ReactRouter.Router>{routes}</ReactRouter.Router>, 
    document.getElementById('content') 
);

来源

2016-03-03 05:31:53 semira

我有什么，没有使用ES6反应路由器的导入问题。 “ReactRouter.Router”解决了它。 – semira

在这里构建@semira是我如何实现一个无积累的反应应用程序。

里面的（在我的情况或./index.php）./index.html我们加载库做出反应，做出反应路由器和巴贝尔transpiler，将转换器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/[email protected]/dist/react.min.js"></script> 
    <script src="https://unpkg.com/[email protected]/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组件：

const About =() => <h2>About Page</h2>;

凡./app/components/App.js是一个作出反应成分写在ES6：

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

来源

2017-01-04 20:28:52 Puiu

没有节点的反应路由

回答

相关问题