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

标签： javascriptreactjsreact-routerreact-router-domreact-router-component

Answer 1

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

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