反应js嵌套路由器的SecurityError： [英] react js nested Routers 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 = https://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 'http://dnadetection/' cannot be created in a document with origin 'http://localhost:3000' and URL 'http://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 = "https://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>
</>
);
这篇关于反应js嵌套路由器的SecurityError：的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
