В react при переходе по ссылке меняется только адрес, обновление элемента происходит только при перезагрузки страницы

Question

import {BrowserRouter as Router, Switch, Route} from "react-router-dom";
import '../Style/Main.css';
import Menu from './Menu';
import Home from './Home';
import Chat from './Chat';
import Recommendations from './Recommendations';

function Main() {
  return (
     <div className="box">
         <div className="main_box">
            <Menu />
              <Router>
                <Switch>
                  
                  <Route exact path="/" component={Home}/>
                  
                  <Route path="/Chat" component={Chat}/>

                </Switch>
              </Router>
            <Recommendations />
         </div>
     </div>
  );
}
export default Main;

import { withRouter } from 'react-router-dom';
import {
    BrowserRouter as Router,
    Link,
    NavLink
  } from "react-router-dom";
import '../Style/Menu.css';

function Menu(){
    return(
        <Router>
            <nav className="menu">
                <NavLink to="/">
                    <div className="menu_item">
                        <div className="menu_item_icon"> </div>
                        <div className="menu_item_name"> Главная</div>
                    </div>
                </NavLink>
                <Link to="/Chat">
                    <div className="menu_item">
                        <div className="menu_item_icon"></div>
                        <div className="menu_item_name"> ЧАТ</div>
                    </div>
                </Link>
                <Link to="/">
                    <div className="menu_item">
                        <div className="menu_item_icon"> </div>
                        <div className="menu_item_name"> Главная</div>
                    </div>
                </Link>
                <Link to="/Chat">
                    <div className="menu_item">
                        <div className="menu_item_icon"></div>
                        <div className="menu_item_name"> ЧАТ</div>
                    </div>
                </Link>
                <Link to="/">
                    <div className="menu_item">
                        <div className="menu_item_icon"> </div>
                        <div className="menu_item_name"> Главная</div>
                    </div>
                </Link>
                <Link to="/Chat">
                    <div className="menu_item">
                        <div className="menu_item_icon"></div>
                        <div className="menu_item_name"> ЧАТ</div>
                    </div>
                </Link>
                <Link to="/">
                    <div className="menu_item">
                        <div className="menu_item_icon"> </div>
                        <div className="menu_item_name"> Главная</div>
                    </div>
                </Link>
               
            </nav>
        </Router>
       
       
    );
}
export default withRouter(Menu);

Answer 1

BrowserRoute нужно оборачивать root компонент.


function Main() {
  return (
   <Router>
     <div className="box">
         <div className="main_box">
            <Menu />
                <Switch>
                  
                  <Route exact path="/" component={Home}/>
                  
                  <Route path="/Chat" component={Chat}/>

                </Switch>
            <Recommendations />
         </div>
     </div>
   <Router/>
  );
}

function Menu(){
    return(
            <nav className="menu">
                <NavLink to="/">
                    <div className="menu_item">
                        <div className="menu_item_icon"> </div>
                        <div className="menu_item_name"> Главная</div>
                    </div>
                </NavLink>
                <Link to="/Chat">
                    <div className="menu_item">
                        <div className="menu_item_icon"></div>
                        <div className="menu_item_name"> ЧАТ</div>
                    </div>
                </Link>
                <Link to="/">
                    <div className="menu_item">
                        <div className="menu_item_icon"> </div>
                        <div className="menu_item_name"> Главная</div>
                    </div>
                </Link>
                <Link to="/Chat">
                    <div className="menu_item">
                        <div className="menu_item_icon"></div>
                        <div className="menu_item_name"> ЧАТ</div>
                    </div>
                </Link>
                <Link to="/">
                    <div className="menu_item">
                        <div className="menu_item_icon"> </div>
                        <div className="menu_item_name"> Главная</div>
                    </div>
                </Link>
                <Link to="/Chat">
                    <div className="menu_item">
                        <div className="menu_item_icon"></div>
                        <div className="menu_item_name"> ЧАТ</div>
                    </div>
                </Link>
                <Link to="/">
                    <div className="menu_item">
                        <div className="menu_item_icon"> </div>
                        <div className="menu_item_name"> Главная</div>
                    </div>
                </Link>
               
            </nav>   
    );

Answer 2

Должен быть один Router

            <nav className="menu">
                <NavLink to="/">
                    <div className="menu_item">
                        <div className="menu_item_icon"> 1</div>
                        <div className="menu_item_name"> Главная</div>
                    </div>
                </NavLink>
                <Link to="/Chat">
                    <div className="menu_item">
                        <div className="menu_item_icon">1</div>
                        <div className="menu_item_name"> ЧАТ</div>
                    </div>
                </Link>
                <Link to="/">
                    <div className="menu_item">
                        <div className="menu_item_icon"> </div>
                        <div className="menu_item_name"> Главная</div>
                    </div>
                </Link>
                <Link to="/Chat">
                    <div className="menu_item">
                        <div className="menu_item_icon"></div>
                        <div className="menu_item_name"> ЧАТ</div>
                    </div>
                </Link>
                <Link to="/">
                    <div className="menu_item">
                        <div className="menu_item_icon"> </div>
                        <div className="menu_item_name"> Главная</div>
                    </div>
                </Link>
                <Link to="/Chat">
                    <div className="menu_item">
                        <div className="menu_item_icon"></div>
                        <div className="menu_item_name"> ЧАТ</div>
                    </div>
                </Link>
                <Link to="/">
                    <div className="menu_item">
                        <div className="menu_item_icon"> </div>
                        <div className="menu_item_name"> Главная</div>
                    </div>
                </Link>
               
            </nav>
            <Switch>
                  
                <Route exact path="/" component={Home}/>
                  
                <Route path="/Chat" component={Chat}/>
                  

            </Switch>
        </Router>

БЛОГ НА HUSL

В react при переходе по ссылке меняется только адрес, обновление элемента происходит только при перезагрузки страницы

Ответы (2 шт):