时间戳

首页 > 解决方案 > 在渲染链接到 Navlink 的组件之前隐藏当前组件 - React Router

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

问题描述

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

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

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 中没有问题。问题是当子导航链接被点击时，父级并没有消失

标签： javascriptreactjsreact-routerrender

解决方案

我认为解决它的最佳方法是像这样将带有 BrowserRouter 的 App.js 组件包装在 index.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")
);

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

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

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

推荐阅读