使用“react-router-dom”链接不提供任何输出

Question

我正在尝试将 NavBar 添加到我的 app.js 文件中。 当我加载页面时，Route 文件正在加载，但在 NavBar 中设置的链接文件没有出现。

这是导航栏页面

import React from 'react';
import { Link } from 'react-router-dom';

const NavBar = () => ( 
        <nav>
            <ul>
                <li>
                    <Link to="/">Home</Link>
                </li>
                <li>
                    <Link to="/about">About</Link>
                </li>
                <li>
                    <Link to="/article">Article</Link>
                </li>
                <li>
                    <Link to="/article-list">Article List</Link>
                </li>
            </ul>
        </nav>
)

export default NavBar;

那么下面是app.js文件

import Homepage from './Pages/Homepage';
import AboutPage from './Pages/AboutPage';
import ArticlesList from './Pages/ArticlesList';
import ArticlePage from './Pages/ArticlePage';
import NavBar from './NavBar';
import {Routes, Route} from 'react-router-dom';

import './App.css';

function App() {
  return (
    <Routes>
      <div className="App">
        <NavBar />
        <div id="page-body">
          <Route path="/" element={<Homepage />} />
          <Route path="/about" element={<AboutPage />}/>
          <Route path="/article-list" element={<ArticlesList />} />
          <Route path="/article" element={<ArticlePage />} />
      </div>
    </div>
    </Routes>
  );
}

export default App;

我将 NavBar 保留在 pages 文件夹之外 我很困惑它可能是什么

只要我的 package.json 文件中的 react-router-dom 版本是：

    "react-router-dom": "^6.0.0-beta.6",

index.js 文件：

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


ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
);

Answer 1

我认为您的导航栏应该在 app.js 中的 Routes 标签之外，然后在您的导航栏文件中，将所有内容包裹在标签周围。

App.js 应该如下所示：

import Homepage from './Pages/Homepage';
import AboutPage from './Pages/AboutPage';
import ArticlesList from './Pages/ArticlesList';
import ArticlePage from './Pages/ArticlePage';
import NavBar from './NavBar';
import {Routes, Route} from 'react-router-dom';

import './App.css';

function App() {
  return (
   <div>
    <NavBar />
    <Routes>
      <div className="App">
        
        <div id="page-body">
          <Route path="/" element={<Homepage />} />
          <Route path="/about" element={<AboutPage />}/>
          <Route path="/article-list" element={<ArticlesList />} />
          <Route path="/article" element={<ArticlePage />} />
        </div>
      </div>
    </Routes>
    </div>
  );
}

export default App;

此外，您的导航组件应如下所示：

   import React from 'react';
import { Link, Routes } from 'react-router-dom';

const NavBar = () => ( 
        <nav>
          <Routes>
            <ul>
                <li>
                    <Link to="/">Home</Link>
                </li>
                <li>
                    <Link to="/about">About</Link>
                </li>
                <li>
                    <Link to="/article">Article</Link>
                </li>
                <li>
                    <Link to="/article-list">Article List</Link>
                </li>
            </ul>
          </Routes>
        </nav>
)

export default NavBar;

您可能还会遇到一个问题，即您使用 a 包裹您的 App 组件，但我不能 100% 确定这一点。