我的React版本是:16.13.1,而我的React-router-dom
版本是:5.1.2。
仅在刷新页面时才更新组件,只有链接会更改,但组件不会呈现。
import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Todo from "./components/Todo/Todo";
import About from "./components/About/About";
const Routes = () => (
<Router>
<Switch>
<Route exact path='/' component={Todo}/>
<Route path="/about" component={About}/>
</Switch>
</Router>
);
export default Routes;
链接代码以更改路线:
import React from 'react';
import { Link, BrowserRouter as Router } from 'react-router-dom';
const Menu = () => {
return (
<nav className="navbar navbar-inverse bg-inverse">
<div className="container">
<div className="navbar-header">
<Router>
<Link to="/" className="navbar-brand">
<i className="fa fa-calendar-check-o"></i> TodoApp
</Link>
</Router>
</div>
<div id="navbar" className="navbar-collapse collapse">
<ul className="nav navbar-nav">
<Router>
<li><Link to="/todos">Tarefas</Link></li>
<li><Link to="/about">Sobre</Link></li>
</Router>
</ul>
</div>
</div>
</nav>
);
}
export default Menu;
我将路线和菜单放在顶层路由器上确实起作用。