javascript - 在 React 中单击两个相同菜单的菜单项时显示相同且仅一个内容

Question

我在 React 中有 2 个相同的菜单有问题，一个位于页眉标签中，第二个位于页脚标签中。我已经完成了路由，但我现在希望两个菜单中相同菜单项的内容只显示一次，并且在单击时可见。内容应位于标签中。我怎样才能做到这一点？我试过这样：

import React from 'react';
import {BrowserRouter as Router, Link, NavLink, Redirect, Prompt} from 'react-router-dom';
import Route from 'react-router-dom/Route';
import Home from '../Home/Home';
import About from '../About/About';
import Work from '../Work/Work';
import Contact from '../Contact/Contact';

const main = () => {
    return (
       <Router>
            <div>
                <ul className="navigation">
                    <NavLink className="home" to="/">Home</NavLink>
                    <NavLink className="about" to="/about">About</NavLink>
                    <NavLink className="work" to="/work">Work</NavLink>
                    <NavLink className="contact" to="/contact">Contact</NavLink>
                </ul>

                <Route className="Home" path="/" exact strict component={Home}/>
                <Route className="About" path="/about" exact strict component={About}/>
                <Route className="Work" path="/work" exact strict component={Work}/>
                <Route className="Contact" path="/contact" exact strict component={Contact}/>

                <ul className="navigation">
                    <NavLink className="home" to="/">Home</NavLink>
                    <NavLink className="about" to="/about">About</NavLink>
                    <NavLink className="work" to="/work">Work</NavLink>
                    <NavLink className="contact" to="/contact">Contact</NavLink>
                </ul>
            </div>
        </Router>
    )
}

export default main;

但是在这种情况下，一切都应该在一个组件中，因为一个应该位于页眉中，另一个位于页脚中，有什么想法吗？

找到解决方案：

class App extends Component {
    render() {
        return (
            <Router>
                <div className="App">
                    <header>    
                        <div className="container-fluid">
                            <div className="container">
                                <Header />
                            </div>
                        </div>
                        <Menu /> 
                    </header>
                    <main>    
                        <div className="container-fluid">
                            <div className="container">
                                <Menu /> 
                                <Route className="Home" path="/" exact strict component={Home}/>
                                <Route className="About" path="/about" exact strict component={About}/>
                                <Route className="Work" path="/work" exact strict component={Work}/>
                                <Route className="Contact" path="/contact" exact strict component={Contact}/>
                            </div>
                        </div>
                    </main>
                    <footer>
                        <div className="container-fluid">
                            <div className="container">
                            <Menu /> 
                            </div>
                        </div>
                    </footer>
                </div>
            </Router>
        );
    }
}

export default App;

并且我将 Menu 作为组件分隔在一个单独的文件中：

import React from 'react';
import {BrowserRouter as Router, Link, NavLink, Redirect, Prompt} from 'react-router-dom';
const menu = () => {
    return (
        <ul className="navigation">
            <NavLink className="home" to="/">Home</NavLink>
            <NavLink className="about" to="/about">About</NavLink>
            <NavLink className="work" to="/work">Work</NavLink>
            <NavLink className="contact" to="/contact">Contact</NavLink>
        </ul>
    )
}

export default menu;

组件很棒。

标签： javascriptreactjs