我想创建一个多页反应应用程序使用反应路由器而不使用节点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网址应用程序。
我是不是漏了什么?或者我需要一些其他路由器库的反应工作?
您只需要一个http服务器,它支持将未找到的页面重定向到索引。html
您可以通过许多解决方案做到这一点:
无论如何,您绝对需要后端(接收http请求的部分)来支持将url重定向到索引。html页面。由于您没有解释当前如何在localhost上提供文件,因此无法提供更多帮助。