React Router 仅显示空白页 - 无数据显示

Question

我是 React 新手。这是我使用 React - Router 的第一个程序当我使用 React-Router 时，我没有在 window 上显示任何数据。它只显示空白页。

我的代码 - profile.js

import React from 'react'
 function Profile()
 { return ( <div>
   <h1>profile</h1> 
   </div> ) }

export default Profile

about.js 文件

import React from 'react'

function About() {
    return (
        <div>
            <h1>about</h1>
        </div>
    )
}

export default About

App.js

import About from './Container/about'
import Profile from './Container/profile'
import {BrowserRouter, Route} from 'react-router-dom'
function App() {
 return ( 
<div className="App"> 
<BrowserRouter> 
<Route element={About} path='/about' /> 
<Route element={Profile } path='/profile' /> 
</BrowserRouter> 
</div> 
); 
}

export default App;

如果有人知道任何解决方案请回复

我检查了一些网站的结果，但我没有从他们那里得到任何解决方案。我看了一些 Youtube 视频。但他们的代码和我的一样，他们得到了结果，但我没有。

Answer 1

如果你使用旧版本 import Switch from react-router-dom

import About from "./Container/about";
import Profile from "./Container/profile";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route component={About} path="/about" />
          <Route component={Profile} path="/profile" />
       </Switch>
     </Router>
 </div>
);
}

export default App;

如果您使用最新版本 ..从react-router-dom导入路由 App.js 导入路线

    import About from './Container/about'
    import Profile from './Container/profile'
    import {BrowserRouter as Router,Routes, Route} from 'react-router-dom'
    function App() {
     return ( 
      <Router> 
        <div className="App"> 
         <Routes>
          <Route exact path='/about' element={<About />}  /> 
          <Route exact path='/profile' element={<Profile /> }  /> 
         </Routes>
        </div> 
      </Router> 
      ); 
      }
    
     export default App;

Answer 2

您可以使用 react-router-dom 中的 Switch 来专门呈现路线。

你的代码应该是这样的。

import About from "./Container/about";
import Profile from "./Container/profile";
import { BrowserRouter, Route, Switch } from "react-router-dom";
function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Switch>
          <Route component={About} path="/about" />
          <Route component={Profile} path="/profile" />
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

检查此 sandbox 其中 react-router-dom 是使用动态参数和组件实现的。

React Router 仅显示空白页 - 无数据显示

React Router Displaying only Blank Page - No data Showing

javascript

web

reactjs

react-router