Question

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

Answer 1

在这里建立@semira是我实现无构建反应应用程序的方式。

在./index.html（或我的情况下为./index.php）内部，我们加载了React库，React路由器和将转换ES6 javascript的Babel转换器，以便浏览器可以解释它。请注意，您必须将脚本类型明确声明为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'))

Answer 2

最后我找到了我发现的东西。感谢您的帮助。

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

Answer 3

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

无节点的反应路由

3 个答案: