리액트-라우터 1개만 자녀

리액트-라우터 1개만 자녀

다음 오류가 계속 발생합니다.

'라우터'에는 하위 요소가 하나만 있을 수 있습니다.

리액트 리액트 리액트 리액트 리액트 리액션 사용 시

이 코드가 예시와 똑같이 동작하지 않는 이유를 알 수 없는 것 같습니다.퀵 스타트

코드는 다음과 같습니다.

import React from 'react';
import Editorstore from './Editorstore';
import App from './components/editor/App';
import BaseLayer from './components/baselayer';
import {BrowserRouter as Router, Route} from 'react-router-dom';
import {render} from 'react-dom';

const root = document.createElement('div');
root.id = 'app';
document.body.appendChild(root);

const store = new Editorstore();
const stylelist = ['https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css', 'https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css', 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css', 'https://api.tiles.mapbox.com/mapbox-gl-js/v0.33.1/mapbox-gl.css'];

stylelist.map((link) => {
    const a = document.createElement('link');
    a.rel = 'stylesheet';
    a.href = link;
    document.body.appendChild(a);
    return null;
});

render((
  <Router>
    <Route exact  path="/" component={BaseLayer} />
    <Route path="/editor" component={App} store={store} />
  </Router>
), document.querySelector('#app'));

포장을 해야 돼요.Route의 상태<div>(또는 ).

render((
  <Router>
    <Route exact  path="/" component={BaseLayer} />
    <Route path="/editor" component={App} store={store} />
  </Router>
), document.querySelector('#app'));

그래야 한다

render((
  <Router>
    <div>
       <Route exact  path="/" component={BaseLayer} />
       <Route path="/editor" component={App} store={store} />
    </div>
  </Router>
), document.querySelector('#app'));

jsfiddle/webpackbin

이것은 의 API 변경 사항입니다.react-router 4.x. 권장되는 접근법은 포장하는 것입니다.Routes in a에 있습니다.Switch: https://github.com/ReactTraining/react-router/issues/4131#issuecomment-274171357

견적:

변환

<Router>
  <Route ...>
  <Route ...>
</Router>

로.

<Router>
  <Switch>
    <Route ...>
    <Route ...>
  </Switch>
</Router>

물론 다음 사항을 추가해야 합니다.SwitchImport 대상:

import { Switch, Router, Route } from 'react-router'

항상 리액트 웹과 네이티브에서 fragment를 사용합니다(>= 리액트 16).

import React, { Component, Fragment } from 'react'
import { NativeRouter as Routes, Route, Link } from 'react-router-native'
import Navigation from './components/navigation'    
import HomeScreen from './screens/home'
import { RecipesScreen } from './screens/recipe'

class Main extends Component {
  render() {
    return (
      <Fragment>
        <Navigation />
        <Routes>
          <Fragment>
            <Route exact path="/" component={HomeScreen} />
            <Route path="/recipes" component={RecipesScreen} />
          </Fragment>
        </Routes>
      </Fragment>
    )
  }
}

export default Main

나는 나의 모든 것을 바쳤다.<Route />내부 태그<Switch> </Switch>이렇게 태그 붙입니다.

    <BrowserRouter>
        <Switch>
            <Route path='/' component={App} exact={true} /> 
            <Route path='/form-example' component={FormExample} />
        </Switch>
    </BrowserRouter>

이것으로 문제가 해결됩니다.

라우터 내에 다른 컴포넌트를 네스트 하는 경우는, 다음과 같이 할 필요가 있습니다.

  <Router>
     <div>
       <otherComponent/>
         <div>
           <Route/>  
           <Route/>
           <Route/>
           <Route/>
         </div>
      </div>
    </Router>

리치 라우터를 사용하고 있는 경우는, 코드가 다음과 같이 되어 있는 것을 확인합니다.

<Router>
    <Login path="/" />
    <Login path="/login" />
</Router>

에 이러한 컴포넌트 포함Div리액트 라우터의 경우는, 이 기능은 유효하게 됩니다만, 리치 라우터에서는 그 Div 요소를 삭제합니다.

모든 루트를 기본 인덱스페이지로 하는 부모 루트로 랩할 수도 있습니다.

<Router history={history}>    
   <Route path="/" component={IndexPage}>
      <Route path="to/page" component={MyPage}/>
      <Route path="to/page/:pathParam" component={MyPage}/>
   </Route>    
</Router>

사용하고 있다react-router-dom버전을 포함한 패키지5.0.1당신 코드와 완벽히 잘 맞아떨어져요

import { BrowserRouter as Router , Router, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
...

class App extends React.Component {
  render() {
    return (
      <Router>
        <ul>
          <li><Link path='/'>Home</Link></li>
          <li><Link path='/about'>About</Link></li>
        </ul>
        <Route path='/' exact component={Home} />
        <Route path='/about' component={About} />
      </Router>
    );
  }
}

export default App;

라우터가 너무 단순하거나 이 규칙에 변경이 있을 수 있지만 이 제한('라우터'에는 자 요소가 1개밖에 없을 수 있음)을 설명한 튜토리얼에 따라 오류를 발생시키지 않고 3개의 루트를 추가할 수 있었습니다.동작 코드는 다음과 같습니다.

function render() {
  ReactDOM.render(
    <BrowserRouter>
      <Route exact path="/" component={App} />
      <Route path="/add" component={AddAuthorForm} />
      <Route path="/test" component={test} />
    </BrowserRouter>
    ,
    document.getElementById('root')
  );
}

제 의존관계는 다음과 같습니다.

"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1",

이 문제는 이전에 부모 태그가 없을 때 발생합니다.<Route>안에서.<Router>이 문제를 해결하려면<Route>등의 부모 태그로 둘러싸이다<div>,<p>기타 예 -

<Router>
    <p>
       <Route path="/login" component={Login} />
       <Route path="/register" component={Register} />
    </p>
</Router>

언급URL : https://stackoverflow.com/questions/42992911/react-router-only-one-child