在反应路由器中，我无法更改视图，但只有 url 正在更改

Posted 2023-02-22

【中文标题】在反应路由器中，我无法更改视图，但只有 url 正在更改

【英文标题】：In react Router i cant change the view but only the url is changing

【发布时间】：2020-06-11 16:38:26

【问题描述】：

当我点击导航链接时，请告诉我这有什么问题，网址正在改变，但内容没有改变 我正在尝试所有方法但无法找出问题所在，请看看这个

App.js

import React,  Component  from 'react';
import './App.css';
import 
  BrowserRouter as Router,
  Switch,
  Route
 from "react-router-dom";
import Home from './components/Home';
import About from './components/About';
import Nav from './components/Nav';
import Contact from './components/Contact';

class App extends Component 
  render()
    return (
      <React.Fragment>
          <div id="page-wrapper">
          <Router>
            <Nav />
            <Switch>
              <Route path="/" exact component=Home />
              <Route path="/about" exact component=About />
              <Route path="/contact" exact component=Contact />
              <Route ><Default /></Route>

            </Switch>
            <Footer />
          </Router>
          </div>
      </React.Fragment>
    );
  


export default App;

我的链接文件，即导航栏

<Link to="/">
     <li className="nav-item">HOME</li>
 </Link>
 <Link to="/about">
     <li className="nav-item">About</li>
 </Link>

提前致谢

【参考方案1】：

将您的 BrowserRouter 移动到 index.js 似乎对我有用。

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

然后从您的代码中删除 <Router>。

【讨论】：

我只是复制/粘贴了您的代码（删除了一些非必要的东西），它工作正常。 codesandbox.io/s/zen-jepsen-l3bth

是的，谢谢，我已经将 BrowserRouter 放在导航栏中了

很高兴知道。这就是为什么我喜欢将 包裹在它上面，这样它“无处不在”。