Question

我正在一个站点上工作，试图切换几个组件，目前我有主页、第 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;

安全错误 - 无法在“历史”上执行“replaceState”：URL 为“http://directory”的历史状态对象

0 个答案: