Добавить ссылку на домашнюю страницу в AppBar с помощью Material-UI - PullRequest
Новая
       18

Добавить ссылку на домашнюю страницу в AppBar с помощью Material-UI

0 голосов
/ 03 июня 2019

Я новичок в React и пытаюсь добавить ссылку на "домашнюю" страницу в компонент AppBar Material-UI (версия 4.0.1).Поведение, которое я хотел бы видеть, заключается в том, что при нажатии на ссылку «Главная страница» отображается компонент «OnePage».

В «OnePage» есть ссылка на другой компонент «TwoPage», который должен быть единственным контентом, отображаемым при нажатии на «ViewTwo page».Тем не менее, в настоящее время отображаются как OnePage, так и TwoPage.

Любая помощь в решении проблемы навигации будет принята с благодарностью!

Вот соответствующие файлы.

Приложение.js 

import React from 'react';
import './App.css';
import SearchBar from './SearchBar';
import OnePage from './OnePage';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <Router>
        <div>
          <SearchBar />
          <Switch>
            <Route path="/" exact component={OnePage} />
          </Switch>
        </div>
      </Router>
    </div>
  );
}

export default App;

SearchBar / index.js 

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import { NavLink, withRouter } from 'react-router-dom';

const useStyles = makeStyles(theme => ({
    root: {
        flexGrow: 1,
    },
    menuButton: {
        marginRight: theme.spacing(2),
    },
    title: {
        flexGrow: 1,
    },
}));

function SearchBar() {
    const classes = useStyles();
    return (
        <div className={classes.root}>
            <AppBar position="static">
                <Toolbar>
                    <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="Menu">
                        <MenuIcon />
                    </IconButton>
                    <NavLink to="/">
                        <Typography variant="h6" className={classes.title}>
                            Home
                        </Typography>
                    </NavLink>
                    <Button color="inherit">Login</Button>
                </Toolbar>
            </AppBar>
        </div>
    );
}

export default withRouter(SearchBar);

OnePage / index.js 

import React from 'react';

import { BrowserRouter as Router, Route, Link, withRouter } from 'react-router-dom'
import { Container } from '@material-ui/core';

import TwoPage from '../TwoPage';



class OnePage extends React.Component {
    render() {
        return (
            <Container>
                <Router>
                    <div>
                        <span>Test Page 1</span>
                    </div>
                    <div>
                        <Link to='/twoPage'>View Two page</Link>
                    </div>

                    <Route path="/twoPage" exact render={() => <TwoPage />} />
                </Router>
            </Container>
        )
    }
}
export default withRouter(OnePage);

TwoPage / index.js 

import React from 'react';



class TwoPage extends React.Component {
    render() {
        return (
            <div>
                <span>Test Page 2</span>
            </div>
        )
    }
}
export default TwoPage;

1 Ответ

1 голос
/ 03 июня 2019

Проблема в том, что вы определяете вторую страницу внутри нового Router компонента.У вас должен быть один корневой Router компонент для правильной работы.Вам не нужно переносить с withRouter HOC, если вы используете <Link/> для указания на маршрут, определенный в <Route/>

Рабочий пример: - 

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

function BasicExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>

        </ul>

        <hr />
        <Route exact path="/" component={OnePage} />
        <Route path="/twoPage" component={TwoPage} />  
      </div>
    </Router>
  );
}

function OnePage() {
  return (
    <div>
      <li>
        <Link to="/twoPage">Two Page</Link>
      </li>
    </div>
  );
}

function TwoPage() {
  return (
    <div>
      <h2>TwoPage</h2>
    </div>
  );
}


export default BasicExample;
...