在渲染链接到 Navlink 的组件之前隐藏当前组件 - React Router

Question

我正在构建一个基于反应路由的单页 Web 应用程序，我想在渲染下一个组件之前隐藏当前组件，该组件应该在单击 Navlink 后呈现，就像 <a href="someLink"> 在 html.但是，我的当前组件并没有消失，下一个组件呈现在当前组件旁边的同一页面上。

我的 app.js 代码（父 class 呈现的主文件）

import React from 'react';
import {Parent} from './Parent';
import {  BrowserRouter as Router,  Route,  NavLink} from 'react-router-dom';
function App() {

  return (
    <div className="App">
      <header className="App-header">
        <Router>
        <NavLink to="/Edit">Edit</NavLink>
        <Route path="/Edit" component={Edit}/>

      </Router>
      </header>

    </div>
  );
}

export default App;

这是我的代码 parent.js -

import React from 'react';
import {Child} from './Child';
import { BrowserRouter as Router,  Route,  NavLink} from 'react-router-dom';
class Parent extends React.Component{
    constructor(props) {
        super(props);

      } 
    render(){
       return(
        <div>
       <p>Parent Render</p>
        <Router>
        <NavLink to="/Parent/Child">Child</NavLink>
        <Route path="/Parent/Child" component={Child}/>
        </Router>
)
     }
}
export {Parent}

Child.js

import React from 'react';
class Child extends React.Component{
    constructor(props) {
        super(props);

      } 
    render(){
        return(
         <div>
             Child Render
             </div>
        )}
}
export{Child}

app.js没有问题。问题是当点击子导航链接时，父链接不会消失

Answer 1

我认为最好的方法是像这样在 index.js 文件中用 BrowserRouter 包装 App.js 组件。

//index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById("root")
);

随后，您可以像这样将所有组件包装在 Route 组件中，从而使用您希望拥有的所有路由更新您的 App.js 组件。

//App.js
import React from "react";
import { Parent } from "./Parent";
import { BrowserRouter as Router, Route, NavLink } from "react-router-dom";
import Home './Home'
import Edit from './Edit'
import Parent from './Parent'


function App() {
  return (
    <div className="App">
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/Edit" component={Edit} />
        <Route path="/parent" component={Parent} />
      </Switch>
    </div>
  );
}

export default App;

现在您不必用 <Router /> 包装您的子组件，您可以在 App.js 中创建尽可能多的 <Routes /> 并使用 <Link /> 导航到那个链接。

在渲染链接到 Navlink 的组件之前隐藏当前组件 - React Router

Hide current component before rendering component linked to Navlink - React Router

javascript

render

reactjs

react-router