我使用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
更多推荐
反应js嵌套路由器的SecurityError:
发布评论