我正在一个站点上工作,试图切换几个组件,目前我有主页、第 1 页、第 2 页、第 3 页。我想让第 3 页成为主页,因此为此我删除了 Main render 语句并添加了 Page3 ,现在它给了我以下错误
SecurityError: Failed to execute 'replaceState' on 'History': A history state object with URL 'http://intro/' cannot be created in a document with origin 'http://localhost:3000' and URL 'http://localhost:3000/'.
Lifecycle.onMount C:/.../modules/Redirect.js:43
40 | return (
41 | <Lifecycle
42 | onMount={() => {
<块引用>
43 |方法(位置); | ^ 44 | }} 45 | onUpdate={(self, prevProps) => { 46 | const prevLocation = createLocation(prevProps.to);
index.js 文件的代码
import React from "react";
import ReactDOM from "react-dom";
import { HashRouter,BrowserRouter Switch, Route } from "react-router-dom";
import * as serviceWorker from "./serviceWorker";
import Main from "./scenes/Main";
import Page1 from "./scenes/Page1";
import Page2 from "./scenes/Page2";
// Components
import Error404 from "./components/common/Error404";
import RedirectAs404 from "./components/common/RedirectAs404";
const Root = () => {
return (
<div>
<Switch>
<Route exact path="/" component={Page3} />
<Route path="/page-1" component={Page1} />
<Route path="/page-2" component={Page2} />
<Route component={RedirectAs404} />
</Switch>
</div>
);
};
ReactDOM.render(
<BrowserRouter>
<div>
<Route render={({ location }) => (location.state && location.state.is404 ? <Error404 /> : <Root />)} />
</div>
</BrowserRouter>,
document.getElementById("root")
);
任何帮助将不胜感激
下面是第3页的副本
// Components
import Helmet from "../../components/common/Helmet";
import Switch from "../../components/common/Switch";
import RedirectAs404 from "../../components/common/RedirectAs404";
const routes = [
{
path: "/intro",
component: <Intro />,
},
{
path: "/contact",
component: <Contact />,
},
];
function Home() {
let { path } = useRouteMatch();
useEffect(() => {
document.documentElement.className = "page3 page-5";
return () => {
document.documentElement.className = "";
};
});
return (
<div>
<Helmet title="Page 3" />
<Header />
<Switch>
<Route path={path} exact>
<Redirect
to={{
pathname: `${path}/intro`.replace(/([^:])(\/\/+)/g, "$1/"),
}}
/>
</Route>
{routes.map((item, index) => (
<Route key={index} path={`${path}${item.path}`} exact>
{item.component}
</Route>
))}
<Route component={RedirectAs404} />
</Switch>
</div>
);
}
export default Home;