Как сделать отображение страницы после ссылки полностьюзанимающая страницу?

Question

[hollanditkzn]

У меня такая проблема, когда я перехожу на link где имеется id.
Но получается что при переходе на такую ссылку внизу появляется страница, то у меня вопрос, как тут быть? брать обычную ссылку <a href='#'> и в ссылке сувать redirect? или как делается у реакта такие моменты?
Вот что у меня получается


В App.js

import React, { Component } from 'react';
import './App.css';
import { BrowserRouter, Route, Link} from 'react-router-dom';
import Home from './Home';

const About = () => (
    <div>
        <h2>About</h2>
    </div>
);
const Contact = () => (
    <div>
        <h2>Contact</h2>
    </div>
);

export default class App extends Component {
  render() {
    return (
        <BrowserRouter>
            <div>
                <ul>
                    <li><Link to='/'>Home</Link></li>
                    <li><Link to='/about'>About</Link></li>
                    <li><Link to='/contact'>Contact</Link></li>
                </ul>
                <hr/>
                <Route exact path='/' component={Home}/>
                <Route path='/about' component={About}/>
                <Route path='/contact' component={Contact}/>
            </div>
        </BrowserRouter>
    );
  }
}

В Home.js

import React, {Component} from 'react';
import { Link, Route, BrowserRouter } from 'react-router-dom';

const HomePage = (match) => (
    <div>
        <h2>HomePage {match.params.id}</h2>
    </div>
);

export default class Home extends Component{
    render(){
        return(
            <div>
                <h1>Home</h1>
                <BrowserRouter>
                    <div>
                        <ul>
                            <li><Link to='/test/1'>Фото на документы</Link></li>
                            <li><Link to='/test/2'>Принтер</Link></li>
                            <li><Link to='/test/3'>Печать на документы</Link></li>
                        </ul>
                        <Route path='/test/:id' component={HomePage}/>
                    </div>
                </BrowserRouter>
            </div>
        )
    }
}

Answer 1

[Антон Спирин]

На сколько я понял вопрос, вам надо переделать так:

import { BrowserRouter, Route, Link, Switch } from 'react-router-dom';

export default class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <ul>
            <li><Link to='/'>Home</Link></li>
            <li><Link to='/about'>About</Link></li>
            <li><Link to='/contact'>Contact</Link></li>
          </ul>
          <hr/>
          <Switch>
            <Route exact path='/' component={Home}/>
            <Route path='/about' component={About}/>
            <Route path='/contact' component={Contact}/>
            <Route path='/test/:id' component={HomePage}/>
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

export default class Home extends Component{
  render(){
    return(
      <div>
        <h1>Home</h1>
        <div>
          <ul>
            <li><Link to='/test/1'>Фото на документы</Link></li>
            <li><Link to='/test/2'>Принтер</Link></li>
            <li><Link to='/test/3'>Печать на документы</Link></li>
          </ul>
        </div>
      </div>
    );
  }
}