如何通过单击reactjs中的标题内容来控制正文内容？

问题描述

我正尝试使用React Router进行重定向，如下所示：

import { useHistory } from "react-router-dom";




function HeaderElements(props)
{
    let history = useHistory();

    function handleClick(link) {
        history.push(link);
    }
    return(
        <div className = "HeaderOptions" onClick = {(e) => {
            e.preventDefault();
            alert(props.headerhrefs);
            handleClick(props.headerhrefs);
        }}>
        {props.title}
        </div>
    );
}

但是当我单击如下所示的链接时：

警报告诉我有关props.headerrefs

，然后不进行重定向，而是引发以下错误：TypeError: Cannot read property 'push' of undefined

这是我的app.js：

import React from 'react';
import './App.css';


import Header from './components/Header/Header';
import GlobalSiteConstants from './components/ConstantFiles/GlobalSiteConstants';
import HomePage from './components/HomePage';
import LoginPage from './components/LoginPage';
import {browserRouter,Route} from 'react-router-dom';

function App() {
  return (
    <div>
    <Header HeaderNames = {GlobalSiteConstants.HeaderNames}
    HeaderHrefs = {GlobalSiteConstants.HeaderHrefs}/>
    <browserRouter>
    <Route exact path = "/"><HomePage / ></Route>
    <Route exact path = "/login"><LoginPage / ></Route>
    </browserRouter>
    </div>
  );
}

export default App;

如您所见，我的标头不在路由器内，我认为这是引起问题的原因。谁能帮我这个忙吗？我想根据用户的点击在“标题路由”下方进行更改。

例如，我的网络结构如下：

--------- Header -----------------

--------内容----------------

所有页面共有标题的地方，内容更改如下： “ /” =>主页 “ / login” =>登录页面

以此类推...

我想根据用户的点击更改Content部分。我知道可以通过条件渲染来实现，但是我们不能在这里使用Router吗？只是好奇。

解决方法

通过将Header放入BrowseRouter中的app.js中解决了该问题。

import React from 'react';
import './App.css';


import Header from './components/Header/Header';
import GlobalSiteConstants from './components/ConstantFiles/GlobalSiteConstants';
import HomePage from './components/HomePage';
import LoginPage from './components/LoginPage';
import {BrowserRouter,Route} from 'react-router-dom';

function App() {
  return (
    <div>
    
    <BrowserRouter>
    <Header HeaderNames = {GlobalSiteConstants.HeaderNames}
    HeaderHrefs = {GlobalSiteConstants.HeaderHrefs}/>
    <Route exact path = "/"><HomePage / ></Route>
    <Route exact path = "/login"><LoginPage / ></Route>
    </BrowserRouter>
    </div>
  );
}

export default App;

reactjs reactjs