React JS - React Router - 分別渲染內容

我試圖將元素中的內容呈現爲與菜單nav元素分開，但它與菜單欄保持呈現在相同的元素中。我試圖從路由器中分離鏈接，但後來發現錯誤。React JS - React Router - 分別渲染內容

這裏是我的路由器組件，其中我導入到我的入口文件：

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 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>

來源

2017-06-13 Rick

第二個答案：因爲React路由器使用路徑匹配URL來渲染組件。這意味着'/'匹配您應用中的每個URL。使用'exact'屬性只匹配根路徑。 – Li357

這很有道理，我會更新我的代碼。謝謝 – Rick

另外，你是否試圖在每條路線上製作一個導航欄？ – Li357

我有同樣的問題，我固定它劈裂的HTML5成子。基本上，你只需要把<BrowserRouter>或成<StaticRouter>。比如裏面所有的組件到render()嘗試是這樣的：

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

Obviusly你還需要<NavLink>爲<nav>到HeaderNav組件和內容你只需要<Route>，你也需要history npm

來源

2018-01-22 02:22:00 Leo1234562014

謝謝，這是我不久前問的，但這正是我現在正在做的事情，所以我會標記爲已接受的答案。 – Rick

React JS - React Router - 分別渲染內容

回答

相關問題