Question

我正在尝试将元素呈现在与菜单nav元素分开的元素中，但它仍然在与菜单栏相同的元素中呈现。我试图将链接与路由器分开，但后来出现了错误。

这是我的路由器组件，我将其导入到我的条目文件中：

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

我的问题是：

如何在Home，About和Blog组件中以单独的元素呈现内容，以便它们不会在“＃main-nav”中呈现？一条路线只能有一个子元素。

如果我尝试在他们自己的div容器中添加路由，我会收到错误。如果我将nav元素包装到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>

Answer 1

我有同样的问题，我修复了将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>
               ); 
           }
        }

很明显，您还需要<nav> /config -routes.js /public /views -index.pug /home -home.pug -app.js进入HeaderNav组件，而您需要的内容<NavLink>，还需要<Route>

React JS - React Router - 单独渲染内容

1 个答案: