Как я могу использовать постоянный компонент заголовка с возможностью навигации в маршрутизаторе React?

#reactjs #react-router-dom

Вопрос:

Я хотел бы иметь заголовок, в котором есть кнопки для перехода к разным маршрутам.

Это мой App.js

 function App() {
    return (
        <>
            <Header />
            <Router>
                <Switch>
                    <Route path="/" component={Loading} exact />
                    <Route path="/home" component={Home} />
                    <Route path="/login" component={Login} />
                    <Route path="/signup" component={SignUp} />
                    <Route path="/history" component={History} />
                    <Route path="/trophies" component={Trophies} />
                </Switch>
            </Router>
        </>
    );
}

Обычно я мог бы просто использовать props.history.push('/history') для навигации внутри компонента внутри <Switch> , однако я хочу <Header /> , чтобы он всегда отображался с навигацией…

Как я могу перемещаться из заголовка?

Код заголовка

 import React from 'react';

import styled from 'styled-components';

export default function Header(props) {
    console.log(props);
    return (
        <HeaderWrap>
            <h1>HEADER</h1>
            <button onClick={() => props.history.push('/Home')}>Home</button>
        </HeaderWrap>
    );
}

const HeaderWrap = styled.div`
    * {
        margin: 0;
        padding: 0;
    }
    height: 15vh;
    background: blue;
    color: white;
    display: flex;
`;

Ответ №1:

Вы можете использовать React.useHistory hook. Или <Link to="/">Home</Link> компонент.

 export default function Header(props) {
  const history = React.useHistory();
  return (
    <HeaderWrap>
        <h1>HEADER</h1>
        <button onClick={() => history.push('/Home')}>Home</button>
    </HeaderWrap>
  );
}

Ответ №2:

вы должны обернуть BrowserRouter или Router вокруг всего App компонента

 function App() {
    return (
        <Router>
          <div className="App">
            <Header />
            <Switch>
              <Route path="/" component={Loading} exact />
              <Route path="/home" component={Home} />
              <Route path="/login" component={Login} />
              <Route path="/signup" component={SignUp} />
              <Route path="/history" component={History} />
              <Route path="/trophies" component={Trophies} />
            </Switch>
          </div>
        </Router>
    );
}

вы также можете обернуть его в index.js :

 ReactDOM.render(<BrowserRouter><App/></BrowserRouter>, document.getElementById('root'));

1.Я все еще получаю TypeError: Cannot read property 'push' of undefined > 10 | <button onClick={() => props.history.push('/Home')}>Home</button>

2. потому что вам нужно подключить свой компонент к react-router-dom. сделайте это так export default withRouter(Header) , а также импортируйте его таким образом: import { withRouter } from "react-router";

3. Это хорошо, как бы то ни было ... from 'react-router-dom' , но большое вам спасибо

Ответ №3:

App.js

              <Router>
                <Header />
                <Switch>
                    <Route path="/" component={Loading} exact />
                    <Route path="/home" component={Home} />
                    <Route path="/login" component={Login} />
                    <Route path="/signup" component={SignUp} />
                    <Route path="/history" component={History} />
                    <Route path="/trophies" component={Trophies} />
                </Switch>
            </Router>

Header.js

import { withRouter } from 'react-router-dom';

export default withRouter(Header);

Это решение… спасибо @Mr.A за ответ