React Router 改变了 URL 但不渲染组件

Question

我已经为此苦苦挣扎了一段时间，我有一个包含一些链接的导航页面和一个反应路由器开关，它应该根据 url 更改页面上的内容。问题是当我单击链接时，地址栏中的 URL 会更改为正确的 URL，但内容没有更改。

我只有一个 BrowserRouter 实例，据我所知，该开关在“/”路径上包含“精确”。

为什么会这样？

Index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {RecoilRoot} from 'recoil';
import 'bootstrap/dist/css/bootstrap.css';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
      <RecoilRoot>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </RecoilRoot>
  </React.StrictMode>,
  document.getElementById('root')
);

NavBar.js

import React from 'react'
import './NavDesktop.css'
import {useRecoilValue} from 'recoil'
import { configState } from '../atoms';
import {Link} from 'react-router-dom'

function NavDesktop(){

    const config = useRecoilValue(configState);
    return(
        <div className="container-fluid shadow nav-desktop-container">
            <div className="row nav-desktop-container-row"><div className="col-auto">{config.site_name ?? "LandKit."}</div><div className="col-auto">
              <div className="container nav-items-container">
                <div className="row nav-desktop-items-row">
                    <div className="col-md-auto"><Link to="/recordings">Call Recordings</Link></div>
                    <div className="col-md-auto"><Link to="/charges">Our Charges</Link></div>
                    <div className="col-md-auto"><Link to="/support">Support</Link></div>
                 </div>
              </div>
             </div>
            </div>
        </div>
    )
}
export default NavDesktop

App.js

import React,{Component} from 'react'
import './App.css';
import InnerPage from './Pages/InnerPage'
import NavMobile from './Components/NavMobile'
import NavDekstop from './Components/NavDesktop'
import Footer from './Components/Footer'
import {BrowserRouter as  Switch, Route} from "react-router-dom";

function App() {
  return (
    
    <div className="container-fluid main-container">
     <div className="row nav-row-main d-flex d-md-none"><NavMobile/></div>
     <div className="row nav-row-main d-none d-md-flex"><NavDekstop/></div>
     <div className="row inner-row-main flex-grow-1">
     
            <Switch>
            <Route exact path="/"><div>home</div></Route>
            <Route path="/recordings"><div>recordings</div></Route>
            <Route path="/charges"><div>Charges</div></Route>
            <Route path="/support"><div>Support</div></Route>
        </Switch>
    
     </div>
      <div className="row nav-row-main"><Footer/></div>
      </div>
  );
}

export default App;

Answer 1

在 app.js 中更改导入来源

import {BrowserRouter as  Switch, Route} from "react-router-dom";

到

import { Switch, Route } from "react-router-dom";

您可以在 index.js 中将 BrowserRouter 导入为 Router，但在 app.js 中的执行方式不正确。

index.js -> import { BrowserRouter as Router } from "react-router-dom";

Switch 只渲染一个路由并且首先匹配哪个路由。由于导入不正确，所以路由匹配出错了。

Answer 2

确保使用 BrowserRouter 和 Switch 包装你的路由。 Link 使用 Switch 来改变链接。

App.js 应该是：

import React,{Component} from 'react'
import './App.css';
import InnerPage from './Pages/InnerPage'
import NavMobile from './Components/NavMobile'
import NavDekstop from './Components/NavDesktop'
import Footer from './Components/Footer'
import {BrowserRouter as Router,  Switch , Route} from "react-router-dom";

function App() {
  return (
    <Router>
      <div className="container-fluid main-container">
        <div className="row nav-row-main d-flex d-md-none"><NavMobile/></div>
        <div className="row nav-row-main d-none d-md-flex"><NavDekstop/></div>
        <div className="row inner-row-main flex-grow-1">
           <Switch>
             <Route exact path="/"><div>home</div></Route>
             <Route path="/recordings"><div>recordings</div></Route>
             <Route path="/charges"><div>Charges</div></Route>
             <Route path="/support"><div>Support</div></Route>
            </Switch>
        </div>
        <div className="row nav-row-main"><Footer/></div>
      </div>
    </Router>
    
  );
}

export default App;

文档可以参考这里：https://reactrouter.com/web/example/basic

Answer 3

请注意这一行：

import {BrowserRouter as  Switch, Route} from "react-router-dom";

您将路由包装在路由器中，而不是在交换机中。 你应该这样做：

import {Switch, Route} from "react-router-dom";