我有一个问题与反应路由器，因为我的url正在更新点击它，但页面没有得到渲染

Question

我在react router上遇到了一个问题点击url时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

您应该将App组件包装为BrowserRouter，或者将App组件包装为接受历史记录的Router组件。

Index.js

import { BrowserRouter } from 'react-router-dom'
ReactDOM.render(<BrowserRouter>
<App />
</BrowserRouter>,document.getElementById("root"));

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 (
<>

<Nav/>
<Switch>
<Route exact path='/about'>
<About/>
</Route>
</Switch>
</>
);
}
export default App;

Nav.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的组件被包装在应用程序组件中，而应用程序组件在index.js中进一步包装在BrowserRouter中，因此您不需要在每个具有Route或Link组件的组件中包含Router。