我的反应路由器有问题，因为我的 url 在点击它时得到更新，但页面没有呈现

Question

我的反应路由器有问题，因为我的 url 在点击它时得到更新，但页面没有被渲染，但是当我在那个特定的 url 上重新加载它时，它会呈现内容，而我希望它在我之后立即呈现点击链接

这是我的 App.js

import React from 'react';

import Nav from './Nav';
import { BrowserRouter as Router ,Switch, Route} from 'react-router-dom';
import About from './About'

function App() {
  return (
    <>
    <Router>
      <Nav/>
      <Switch>
      <Route exact path='/about' render={About} />
      </Switch>
    </Router>
    </>
  );
}

export default App;

这是我的 Nav.js

import React from "react";
import {BrowserRouter as Router , Link } from "react-router-dom"; 
import './App.css';

function Nav(){
    return(
        <Router>
        <nav>
            logo
                <Link to="/about">
                About
                </Link>
                <Link to='/shop'>
                shop
                </Link>
        </nav>
        </Router>
    )
}

export default Nav

这是我的 About.js

import React from "react";

function About(){
    return(
        <div>
            About Page
        </div>
    )
} 
export default About

Answer 1

您应该使用BrowserRouter包装App组件，或者使用接受历史道具的Router组件包装App组件。

索引.js

import { BrowserRouter } from 'react-router-dom'

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

应用程序.js

import React from 'react';

import Nav from './Nav';
import { BrowserRouter as Router ,Switch, Route} from 'react-router-dom';
import About from './About'

function App() {
  return (
    <>
    
      <Nav/>
      <Switch>
      <Route exact path='/about'>
        <About/>
      </Route>
      </Switch>
    </>
  );
}

export default App;

导航.js

import React from "react";
import {BrowserRouter as Router , Link } from "react-router-dom"; 
import './App.css';

function Nav(){
    return(
        
        <nav>
            logo
                <Link to="/about">
                About
                </Link>
                <Link to='/shop'>
                shop
                </Link>
        </nav>
        
    )
}

export default Nav

由于Nav.js和其他使用Routes组件被包装在 app 组件中，app 组件被进一步包装在index.js 的BrowserRouter中，因此您不需要在每个具有Route或Link组件的组件中包含Router 。