反应js嵌套路由器安全错误：

Question

我使用 react js，我有嵌套路由，我收到这样的错误： × SecurityError: 无法在“历史”上执行“pushState”：无法在源为“http://localhost:3000”和 URL 为“http://localhost:3000/”的文档中创建 URL 为“http://dnadetection/”的历史状态对象。强>

当点击子导航栏上的项目时，我需要隐藏主页组件。

---

第一个导航栏：

 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;

主页组件：

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 组件：

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;

Answer 1

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

现在当你像

这样实际配置你的链接时

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

相当于

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

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

所以完整的解决方案是

   <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>

跟在

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