反应js嵌套路由器的SecurityError：

本文介绍了反应js嵌套路由器的SecurityError：的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我使用React js，并且嵌套了路由，并且收到如下错误：× 安全错误：无法在历史记录上执行 pushState：历史不能在来源为

第一个导航栏：

import来自反应的React； 从 ./Home导入Home； 从 ./关于导入关于； 从 ../SignIn/login/LoginApp导入登录； 从 ../SignUp/SignUpApp导入SignUp； import‘../index.css’； import‘./comp.css’； 从 react-router-dom导入{BrowserRouter，NavLink，Switch，Route}； 类头扩展了React.Component { state = { isHome：false } changeState =（）=> { this.setState（ {isHome：true}）} render（）{ return（< BrowserRouter> < ul className = horizUL> < li>< NavLink onClick = {this.changeState} to = /> Home< / NavLink>< / li> < li>< NavLink to = about>关于< / NavLink> / li> < li>< NavLink to = logIn>登录< / NavLink>< / li> < li>< NavLink to = signUp> SignUp< / NavLink>< / li> < / ul> < Switch> < div className = container> < Route确切路径= /> < HomePage /> < / Route> < Route精确路径= / about> < ; AboutPage /> < / Route> <路由精确路径= / logIn> < LogInPage /> < / Route> <路由精确路径= / signUp> < SignUpPage /> < / Route> < / div> < / Switch> < / BrowserRouter> ）; } } function HomePage（）{ return（< Home />）; } 函数AboutPage（）{ return< About /> } 函数LogInPage（）{ return< LogIn /> } 函数SignUpPage（）{ return< SignUp /> } 导出默认标题；

家庭组件：

import从反应中反应； 导入来自。/搜索的搜索； 从 ./ButtonsInMainPage导入ButtonsInMainPage； import‘../index.css’； import‘./comp.css’； 类首页扩展了React.Component { render（）{ return（< div> < br /> <搜索/> < ButtonsInMainPage /> < / div> ）; } } 导出默认主页；

ButtonsInMainPage组件：

import React，{片段}来自 react； 从 ../DNA_DETECTION/DNA_App导入DnaDetect； import ../index.css； import‘./comp.css’； 从 react-router-dom导入{Link，useParams，useRouteMatch，Route，Switch，BrowserRouter}； 函数ButtonsInMainPage（props）{ const ncbiURL = www.ncbi.nlm.nih.gov/; let match = useRouteMatch（）; return（< BrowserRouter> < ul className = verticalUL> < li>< a className = active href = {ncbiURL}> ；连接到NCBI< / a> / li> < li><链接到= {`$ {match.url} / dnaDetection`}> DNA检测< / Link>< / li> < li><链接到= {`$ {match.url} / taxonomyTree`}>分类法树< / Link>< / li> < li> <链接到= {`$ {match.url} / research`}>研究< / Link>< / li> < / ul> < Switch> < Route path = {`$ {match.path} / dnaDetection`} component = {Dna}> < Dna /> < / Route> <路由路径= {`$ {match.path} / taxonomyTree`}> < taxonomyTree /> < / Route> <路由路径= {`$ {match .path} / research`}> < research /> < / Route> < / Switch> < / BrowserRouter> ）; 函数Dna（）{ return< h3> DNA< / h3> ;; } function taxonomyTree（）{ return< h3> taxonomyTree< / h3> ;; } function research（）{ return< h3> research< / h3> ;; } } 导出默认值ButtonsInMainPage;

解决方案

您的代码存在的问题是您的主页是呈现在 / 路径上，因此 match.url 返回 /

现在，当您实际配置链接时，例如

<链接到= {`$ {match.url} / dnaDetection`}> DNA检测< / Link>

相当于

<链接到= {`// dnaDetection`}> DNA检测< / Link>

另一件事，您必须注意，您在父级路由上指定了确切的属性，因此子级路由不会匹配。还可以在您的层次结构中使用单个BrowserRouter

因此完整的解决方案将是

< div className = container> < Switch> <路由精确路径= / about> < AboutPage /> < / Route> <路由精确路径= / logIn> < LogInPage /> < / Route> <路由精确路径= / signUp> < SignUpPage /> < / Route> < Route path = /> < HomePage /> < / Route> < / Switch> < / div>

接着是

return（<> < ul className = verticalUL> < li> {}} < ; a className = active href = {ncbiURL}> {} 连接到NCBI {} < / a> < / li> ; < li> {} <链接到= {`$ {match.url} dnaDetection`}> DNA检测< / Link> < / li> < li> {} <链接到= {`$ {match.url} taxonomyTree`}}>分类树< / Link> < / li> < li> {} <链接到= {`$ {match.url} research`}>研究< / Link> < / li> < / ul> < Switch> < Route path = {`$ {match.path} dnaDetection`}组件= {Dna}> < Dna /> &l t; / Route> < Route path = {`$ {match.path} taxonomyTree`}> < TaxonomyTree /> < / Route> < Route path = {`$ {match.path} research`}> <研究/> < / Route> < / Switch> < /> ）;

正在运行的演示

I work with react js, and I have nested routes, and I recieve an error like that: × SecurityError: Failed to execute 'pushState' on 'History': A history state object with URL 'dnadetection/' cannot be created in a document with origin 'localhost:3000' and URL 'localhost:3000/'.

And I need to hide the home page component's when item at the child navbar clicked.

First Nav bar:

import React from "react"; import Home from './Home'; import About from './About'; import LogIn from '../SignIn/login/LoginApp'; import SignUp from '../SignUp/SignUpApp'; import '../index.css'; import './comp.css'; import {BrowserRouter,NavLink,Switch,Route} from 'react-router-dom'; class Header extends React.Component{ state={ isHome:false } changeState = ()=>{ this.setState({isHome:true}) } render(){ return( <BrowserRouter> <ul className="horizUL"> <li><NavLink onClick={this.changeState} to="/">Home</NavLink></li> <li><NavLink to="about">About</NavLink></li> <li ><NavLink to="logIn">Login</NavLink></li> <li><NavLink to="signUp">SignUp</NavLink></li> </ul> <Switch> <div className="container"> <Route exact path="/"> <HomePage/> </Route> <Route exact path="/about" > <AboutPage/> </Route> <Route exact path="/logIn"> <LogInPage/> </Route> <Route exact path="/signUp"> <SignUpPage/> </Route> </div> </Switch> </BrowserRouter> ); } } function HomePage(){ return( <Home/>); } function AboutPage(){ return <About/> } function LogInPage(){ return <LogIn/> } function SignUpPage(){ return <SignUp/> } export default Header;

Home Component:

import React from "react"; import Search from './Search'; import ButtonsInMainPage from './ButtonsInMainPage'; import '../index.css'; import './comp.css'; class Home extends React.Component { render(){ return ( <div > <br/> <Search/> <ButtonsInMainPage/> </div> ); } } export default Home;

ButtonsInMainPage Component:

import React, { Fragment } from "react"; import DnaDetect from "../DNA_DETECTION/DNA_App"; import '../index.css'; import './comp.css'; import {Link,useParams, useRouteMatch,Route, Switch, BrowserRouter} from 'react-router-dom'; function ButtonsInMainPage(props) { const ncbiURL = "www.ncbi.nlm.nih.gov/"; let match = useRouteMatch(); return ( <BrowserRouter> <ul className = "verticalUL"> <li> <a className = "active" href = {ncbiURL} > Connect to NCBI </a></li> <li> <Link to = {`${match.url}/dnaDetection`} > DNA Detection </Link></li> <li> <Link to ={ `${match.url}/taxonomyTree`} > Taxonomy Tree </Link></li> <li> <Link to = { `${match.url}/research`}> Research </Link></li> </ul> <Switch> <Route path={`${match.path}/dnaDetection`} component={Dna}> <Dna/> </Route> <Route path={`${match.path}/taxonomyTree`}> <taxonomyTree/> </Route> <Route path={`${match.path}/research`}> <research/> </Route> </Switch> </BrowserRouter> ); function Dna(){ return <h3>DNA</h3>; } function taxonomyTree(){ return <h3>taxonomyTree</h3>; } function research(){ return <h3>research</h3>; } } export default ButtonsInMainPage;

解决方案

The issue with your code is that Your Home page is rendered at / path and hence match.url return you /

Now when you actually configure your link like

<Link to={`${match.url}/dnaDetection`}> DNA Detection </Link>

It is equivalent to

<Link to={`//dnaDetection`}> DNA Detection </Link>

Another thing you must note that you have an exact attribute specified on the Parent routes so child routes won't match. Also use a single BrowserRouter in your hierarchy

So the complete solution would be

<div className="container"> <Switch> <Route exact path="/about"> <AboutPage /> </Route> <Route exact path="/logIn"> <LogInPage /> </Route> <Route exact path="/signUp"> <SignUpPage /> </Route> <Route path="/"> <HomePage /> </Route> </Switch> </div>

Followed with

return ( <> <ul className="verticalUL"> <li> {" "} <a className="active" href={ncbiURL}> {" "} Connect to NCBI{" "} </a> </li> <li> {" "} <Link to={`${match.url}dnaDetection`}> DNA Detection </Link> </li> <li> {" "} <Link to={`${match.url}taxonomyTree`}> Taxonomy Tree </Link> </li> <li> {" "} <Link to={`${match.url}research`}> Research </Link> </li> </ul> <Switch> <Route path={`${match.path}dnaDetection`} component={Dna}> <Dna /> </Route> <Route path={`${match.path}taxonomyTree`}> <TaxonomyTree /> </Route> <Route path={`${match.path}research`}> <Research /> </Route> </Switch> </> );

Working demo