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 - 分别渲染内容

回答

相关问题