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

Question

我想在不使用节点 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 object not found 错误。

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

我错过了什么吗？ 或者我需要一些其他路由器库来响应工作？

Answer 1

您只需要一个支持将未找到的页面重定向到index.html的http服务器

您可以通过多种解决方案做到这一点：

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

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