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);
必须有一个路由器
BrowserRoute您需要包装根组件。