React Router v6 - 使用 NavLink 但没有路由匹配位置“/”

Question

我正在尝试使用我的 app.jsx 文件中的导航链接在我的导航栏中创建链接，但是当我尝试 npm start 时，我没有看到导航链接并且我收到一条消息说没有匹配的路线地点 ”/”。我不确定为什么。我在某个地方看到我需要开始使用元素，但我不确定如何开始。我将显示 app.jsx 文件，其中包含似乎仍然无法正常工作的元素语句，以及根本不使用元素的文件，这也无济于事，但我已经习惯了。有人能指出我正确的方向吗？

index.js :

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './pages/App/App';
import { BrowserRouter, Routes, Route } from 'react-router-dom'

ReactDOM.render(
  <BrowserRouter>
    <Routes>
      <React.Fragment>
        <Route render={() => <App/>} />
      </React.Fragment>
    </Routes>
  </BrowserRouter>,
  document.getElementById('root')
);

App.jsx : 元素

import React, { useState } from 'react';
import { Route, NavLink } from 'react-router-dom'
import './App.css';

function App() {

  const [puppies, setPuppies] = useState([])

  return (
    <div className="App">
      <header className="App-header">
        React Puppies CRUD
        <nav>
          <NavLink exact to='/' element={<div>Index</div>}>Puppy List</NavLink>
          <NavLink className='m-left' exact to='/add' element={<div>Add</div>}>Add Puppy</NavLink>
        </nav>
      </header>
      <main>
      </main>
    </div>
  );
}

export default App;

App.jsx : 没有元素

import React, { useState } from 'react';
import { Route, NavLink } from 'react-router-dom'
import './App.css';

function App() {

  const [puppies, setPuppies] = useState([])

  return (
    <div className="App">
      <header className="App-header">
        React Puppies CRUD
        <nav>
          <NavLink exact to='/'>Puppy List</NavLink>
          <NavLink className='m-left' exact to='/add'>Add Puppy</NavLink>
        </nav>
      </header>
      <main>
      </main>
    </div>
  );
}

export default App;

Answer 1

链接使用 to prop 作为目标 route 的链接，并且 UI 需要在 Route 上呈现element 道具上的组件。我建议无条件渲染 App 组件并将路由移动到其中。

示例：

index.js

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

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

应用程序

import React, { useState } from 'react';
import { Routes, Route, NavLink } from 'react-router-dom'
import './App.css';

function App() {

  const [puppies, setPuppies] = useState([]);

  return (
    <div className="App">
      <header className="App-header">
        React Puppies CRUD
        <nav>
          <NavLink end to='/'>Puppy List</NavLink>
          <NavLink className='m-left' to='/add'>Add Puppy</NavLink>
        </nav>
      </header>
      <main>
        <Routes>
          <Route path="/" element={<div>Puppy List</div>} />
          <Route path="/add" element={<div>Add Puppy</div>} />
        </Routes>
      </main>
    </div>
  );
}

export default App;

React Router v6 - 使用 NavLink 但没有路由匹配位置“/”

React Router v6 - Using NavLink but getting No routes matched location "/"

javascript

routes

reactjs

react-router-dom