提问者:小点点

如何使用react路由器在react js中创建无节点的多页应用程序


我想创建一个多页反应应用程序使用反应路由器而不使用节点js。我创建了一个index.html文件和app.js文件。我的档案如下:

index.html

<head>
    <title>React Demo</title>
    <link rel="shortcut icon" href="favicon.ico">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/4.1.1/react-router.js"></script>
    <script src="https://unpkg.com/prop-types/prop-types.min.js"></script>
    <script src="https://unpkg.com/history/umd/history.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="http://cdn.auth0.com/js/auth0/8.5/auth0.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script src="app.js" type="text/babel"></script>
 </body>

应用程序。js

let ReactRouter = window.ReactRouter
let Router = ReactRouter.Router
let IndexRoute = ReactRouter.IndexRoute
let Route = ReactRouter.Route
let Link = ReactRouter.Link
let Redirect = ReactRouter.Redirect
let History = window.History
let browserHistory = History.createBrowserHistory()

class HomePage extends React.Component{
    render() {
      return (
        <div>
            <h1>Hello World!</h1>
            <span><a href="dashboard">Go Dashboard</a></span>
        </div>
      );
    }
}

class Dashboard extends React.Component{
    render() {
      return (
        <div>
            <h1>Hello Dashboard!</h1>
        </div>
      );
    }
}

class NotFoundPage extends React.Component{
    render() {
      return (
        <div>
            <h1>The page you looking for was not found!</h1>
        </div>
      );
    }
}

ReactDOM.render(
    <Router history={browserHistory}>
        <Route path="/" component={HomePage}>
           <Route path="dashboard" component={Dashboard}></Route>
        </Route>
    </Router>
, document.getElementById('root'));

当我在浏览器中运行应用程序时http://localhost/demo-app/而不是主页组件调用。

但当我打开http://localhost/demo-app/dashboard比它显示404对象未找到错误。

我想创建没有节点和npm的应用程序。我在网上搜索的解决方案,但我没有找到任何工作的解决方案的反应路由器的cdn网址应用程序。

我是不是漏了什么?或者我需要一些其他路由器库的反应工作?


共1个答案

匿名用户

您只需要一个http服务器,它支持将未找到的页面重定向到索引。html

您可以通过许多解决方案做到这一点:

  • Apache或任何其他反向代理
  • 定制软件解决方案(包括基于节点的工具,如service)
  • 带有dev service的Webpack嵌入了能够重定向的文件服务解决方案(参见)

无论如何,您绝对需要后端(接收http请求的部分)来支持将url重定向到索引。html页面。由于您没有解释当前如何在localhost上提供文件,因此无法提供更多帮助。