Question

我想使用react路由器创建一个多页面反应应用，而不使用节点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>

app.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/中运行应用时比调用 HomePage组件。

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

我想创建没有节点和npm的app。我在网上搜索了解决方案，但我没有为cdn url apps找到任何反应路由器的解决方案。

我错过了什么吗？或者我需要一些其他路由器库来做出反应？

Answer 1

您只需要一台支持将未找到的网页重定向到index.html

的http服务器

您可以使用许多解决方案执行此操作：

Apache或任何其他反向代理
自定义软件解决方案（包括基于节点的工具，如serve）
带有dev服务器的Webpack嵌入了一个能够重定向的文件服务解决方案（see）

无论如何，您绝对需要后端（接收http请求的部分）来支持将您的网址重定向到index.html页面。由于您无法解释当前如何在localhost上提供文件，因此无法为您提供更多帮助。

如何在反应路由器的反应js中创建没有节点的多页面应用程序

1 个答案: