部分不是<route>成分。 的所有子组件<routes>必须是一个<route></route></routes></route>

Question

需要将注册和登录组件添加到容器 class 中。我在 Udemy 上学习了反应课程。 他们使用的是旧版本的 react-router-dom。 为此，我使用了 v6 react router dom 并进行了更改，但是我不知道该怎么做。 这段代码对我来说是新的，请帮助我

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 class 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>
 )
}

希望有所帮助。