React router not rendering default route答案

【问题标题】：React router not rendering default routeReact router not rendering default route
【发布时间】：2022-12-26 21:49:06
【问题描述】：

I am trying to add a default page where the user first goes to when opening the site, but it is not rendering the default route. How can I fix this? react router v6 Note: works fine without router so shouldnt be a component issue

import React, {useState} from 'react';
import './App.css';
import {BrowserRouter as Router, Routes, Route, Switch} from 'react-router-dom';
import AddNote from './components/noteDisplay/addNote/newNote.js'
import NoteDisplay from './components/noteDisplay/noteDisplay.js'
import secondPage from './components/secondPage/secondContainer.js'
const App = () => {

  return (
      
        <div className="App">
          <h1 className="app-title">My notes</h1>
          <Router>
            <div>
              <Routes>

                <Route path='/second' component={secondPage}/>
                <Route path='*' component={NoteDisplay}/>

              </Routes>
            </div>

          </Router>

        </div> 


  );
}


export default App;

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

The page user see first is the home page and specified with "/". To make it default you can use index prop of Route component like in the following

<Route path="/" element={<App />}>
    <Route index element={<Home />} />
    <Route path='/second' component={secondPage}/>
    <Route path='*' component={NoteDisplay}/>
</Route>

【讨论】：

【解决方案2】：

The react-router-dom v6 Route component API changed significantly from v5. Gone are the component prop and render and children function props, replaced by a single element prop that takes a ReactElement, a.k.a. JSX.

Routes & Route

declare function Route(
  props: RouteProps
): React.ReactElement | null;

interface RouteProps {
  caseSensitive?: boolean;
  children?: React.ReactNode;
  element?: React.ReactElement | null;
  index?: boolean;
  path?: string;
}

Switch from the old Route component prop to the element prop, and pass the routed component as JSX instead of a reference to the component.

<Routes>
  <Route path='/second' element={<SecondPage />} />
  <Route path='*' element={<NoteDisplay />} />
</Routes>

【讨论】：

still doesnt work
@GeneralPleather It should certainly work. See the attached codesandbox.
oh i forgot to change one of the component into element
@GeneralPleather So just to confirm, you have your code working with the applied solution?
Yes I have Thanks!

【解决方案3】：

<Router>
  <div className="App">
  <Routes>
      <Route path="/*" element={<><Header /><Home /></>} />          
      <Route path="/login" element={<><Login /></>} />
      <Route path="/checkout" element={<><Header /><Checkout /></>} />
  </Routes>
    </div>
</Router>

【讨论】：