节不是<Route>组件。<Routes>的所有组件子组件都必须是<Route>

Question

注册和登录组件需要添加到容器类中。我对乌德米上了个反应课。他们正在使用一个较旧版本的反应-路由器-多姆。为此，我使用了v6反应路由器域并进行了更改，但这一次我不知道该做什么。这个代码对我来说是新的，请帮助我。

function App() {
  return (
    <Router>
      <Fragment>
        <Navbar />
        <Routes>
          <Route exact path='/' element={<Landing />} />
          <section className='container'>
            <Route exact path='/register' element={Register} />
            <Route exact path='/login' element={Login} />
          </section>
        </Routes>
      </Fragment>
    </Router>
  );
}

控制台中的错误

[section] is not a <Route> component. All component children of <Routes> must be a <Route>

Answer 1

当错误通知您时，只有Route或React.Fragment是Routes组件的有效子组件。

如果希望将多个路由组件呈现到特定的布局中，即公共UI/布局，则创建一个要嵌套的布局路由。

确保还将Register和Login呈现为JSX！

示例：

import { Outlet } from 'react-router-dom';

const SectionLayout = () => (
  <section className='container'>
    <Outlet /> // <-- nested routes render content here
  </section>
);

export default SectionLayout;

..。

import SectionLayout from '../path/to/SectionLayout';

...

<Routes>
  <Route path='/' element={<Landing />} />
  <Route element={<SectionLayout />}>
    <Route path='/register' element={<Register />} />
    <Route path='/login' element={<Login />} />
  </Route>
</Routes>

有关更多信息，请参见：

• 布局路线

Answer 2

我认为这个错误本身是相当有描述性的。<Routes />的子类只能是<Route />，而<section />不能满足这一要求。

如果您同时需要Register和Login组件，可以使用.container类包装section。

我们可以通过不同的方法来实现这一目标，以下是其中的几个。

例如：

/**
* 1. Putting them inside the components itself
*/

const Register = () => {
 return (
  <section className="container">
    // your other codes here
  </section>
 )
}

const Login = () => {
 return (
  <section className="container">
    // your other codes here
  </section>
 )
}

/**
* 2. As a reusable Layout wrapper or Higher Order Component or 
* Useful when you have many shared contents and styling 
*/

const Container = (props) => {
 return (
  <section className="container">
   // shared contents
   {props.children}
   // other shared contents
  </section>
 );
}

const Register = () => {
 return (
  <Container>
    // your other codes here
  </Container>
 )
}

const Login = () => {
 return (
  <Container>
    // your other codes here
  </Container>
 )
}

希望这能有所帮助。