ReactJS:在开发环境中重新加载内部组件时出现 404 错误
ReactJS: 404 error on reloading the inner components in dev env
我每次重新加载任何内部组件时都会收到 404 错误。我总是必须导航到主页,然后 reload/refresh 应用程序才能再次运行的页面。
我试过使用 BrowserRouter,但也没用。
这是我的代码:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import createBrowserHistory from 'history/createBrowserHistory';
import { Router, Route, Switch } from "react-router-dom";
const history = createBrowserHistory();
/** elements */
import Header from './components/elements/Header';
import Footer from './components/elements/Footer';
/** components */
import Projects from './components/Projects';
import ProjectsAdd from './components/ProjectsAdd';
import Categories from './components/Categories';
import CategoriesAdd from './components/CategoriesAdd';
export default class Index extends Component
{
render()
{
return (
<Router history={history}>
<div id="main">
<Header />
<section className="content">
<section id="pageRight">
<Switch>
<Route exact path={"/"} component={Projects} />
<Route path={"/projects/add"} component={ProjectsAdd} />
<Route exact path={"/categories"} component={Categories} />
<Route path={"/categories/add"} component={CategoriesAdd} />
</Switch>
</section>
</section>
<Footer />
</div>
</Router>
);
}
}
if (document.getElementById('layout'))
ReactDOM.render(<Index />, document.getElementById('layout'));
我找到了解决方案 (https://youtu.be/vNof0z32l84)。
我希望这对某些人有用。但是,如果您觉得有改进的余地,请告诉我。 :)
我每次重新加载任何内部组件时都会收到 404 错误。我总是必须导航到主页,然后 reload/refresh 应用程序才能再次运行的页面。
我试过使用 BrowserRouter,但也没用。
这是我的代码:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import createBrowserHistory from 'history/createBrowserHistory';
import { Router, Route, Switch } from "react-router-dom";
const history = createBrowserHistory();
/** elements */
import Header from './components/elements/Header';
import Footer from './components/elements/Footer';
/** components */
import Projects from './components/Projects';
import ProjectsAdd from './components/ProjectsAdd';
import Categories from './components/Categories';
import CategoriesAdd from './components/CategoriesAdd';
export default class Index extends Component
{
render()
{
return (
<Router history={history}>
<div id="main">
<Header />
<section className="content">
<section id="pageRight">
<Switch>
<Route exact path={"/"} component={Projects} />
<Route path={"/projects/add"} component={ProjectsAdd} />
<Route exact path={"/categories"} component={Categories} />
<Route path={"/categories/add"} component={CategoriesAdd} />
</Switch>
</section>
</section>
<Footer />
</div>
</Router>
);
}
}
if (document.getElementById('layout'))
ReactDOM.render(<Index />, document.getElementById('layout'));
我找到了解决方案 (https://youtu.be/vNof0z32l84)。
我希望这对某些人有用。但是,如果您觉得有改进的余地,请告诉我。 :)