react js nested Routers SecurityError:

问题

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;

回答1:

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

来源：https://stackoverflow.com/questions/61939164/react-js-nested-routers-securityerror