React JS - React Router - コンテンツを個別にレンダリングする

Question

メニューのナビゲーション要素とは別の要素にコンテンツをレンダリングしようとしていますが、メニューバーと同じ要素にレンダリングを続けます。私はルータからリンクを分離しようとしましたが、その後エラーが発生しました。ここで

は、私は私のエントリファイルにインポートしています私のルータコンポーネント、次のとおりです。

import React from 'react'; 
 
import ReactDOM from 'react-dom'; 
 
import ReactDOMServer from 'react-dom/server'; 
 
import {BrowserRouter as Router, Route, Link, StaticRouter} from 'react-router-dom'; 
 

 
import Home from './Home.jsx'; 
 
import About from './About.jsx'; 
 
import BlogList from './BlogList.jsx'; 
 

 
const Routes =() => (
 
    <Router> 
 
     <div> 
 
      <ul> 
 
       <li><Link to="/">Home</Link></li> 
 
       <li><Link to="/about">About</Link></li> 
 
       <li><Link to="/blog">Blog</Link></li> 
 
      </ul> 
 
      <Route exact path="/" component={Home} /> 
 
      <Route path="/about" component={About} /> 
 
      <Route path="/blog" component={BlogList} /> 
 
     </div> 
 
    </Router> 
 
) 
 

 
export default Routes; 
 

 
ReactDOM.render((
 
    <Routes /> 
 
), document.getElementById('main-nav'))

私の質問は次のとおりです。

について、ホームからのコンテンツをレンダリングするにはどうすればよいですとブログのコンポーネントは別々の要素になっているので、 "＃main-nav"の内部でレンダリングしませんか？ルートは1つの子要素しか持つことができません。

自分のdivコンテナにルートを追加しようとするとエラーが発生します。 ulにnav要素をラップすると、エラーが発生します。私は同じ問題を持っていたし、私はそれがサブコンポーネントにHTML5をspliting固定

<nav id="main-nav"> 
 
    <div> 
 
     <ul> 
 
      <li a href="/">Home</a></li> 
 
      <li a href="/about">About</a></li> 
 
      <li a href="/blog">Blog</a></li> 
 
     </ul> 
 
    </div> 
 
</nav> 
 
<div id="content"> 
 
    Home/ABout/Blog Content in here 
 
</div>

Answer 1

：

は理想的には、私はこのような何かをしたいです。基本的に、あなただけのrender()に例.FOR <BrowserRouter>内部または<StaticRouter>に、すべてのコンポーネントを置く必要がある。このような何かしてみてください：ObviuslyあなたもHeaderNavコンポーネントに<nav>ため<NavLink>を必要とし、コンテンツのため

 import { Router, Route, Link,NavLink} from 'react-router-dom'; 
     import createBrowserHistory from 'history/createBrowserHistory'; 
     import HeaderNav from './HeaderNav'; 
     import SectionContent from './SectionContent'; 
     import FooterComponent from './FooterComponent';  

     export default class Layout extends React.Component{ 
      constructor(props) { 
       super(props); 
      } 
      render(){ 
       var history=createBrowserHistory(); 
       return(
        <Router history={history}> 
         <HeaderNav/> 
         <SectionContent/> 
         <FooterComponent/> 
        </Router> 
       ); 
      } 
     } 

を<Route>が必要です。history npm