我在使用 React 路由器时遇到问题，因为我的 url 在点击它时会得到更新，但页面没有被呈现

Posted 2023-02-22

【中文标题】我在使用 React 路由器时遇到问题，因为我的 url 在点击它时会得到更新，但页面没有被呈现

【英文标题】：I am having an issue with react router as my url is getting updated on clicking on it but the page is not getting rendered

【发布时间】：2021-12-11 17:43:44

【问题描述】：

我在使用 react 路由器时遇到问题，因为我的 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

【参考方案1】：

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

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。

【讨论】：

感谢它的工作。真的很感激

如果我的回答帮助您解决了问题，请考虑标记answer as accepted。谢谢。