Как заставить React-Router перезаписывать только < main > при смене страниц

Joe Shmoe спросил: 26 ноября 2017 в 04:30 в: reactjs

Мой сайт имеет одинаковый верхний и нижний колонтитулы на всех страницах. Я использую реагирующий маршрутизатор, и я хочу перезаписывать основной раздел html новым содержимым страниц при каждом нажатии ссылки.

Вот что я пробовал до сих пор:

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router, Route, Link } from 'react-router-dom'class BasicExample extends React.Component {
    render() {
        return (
            [
                <Header />,
                <Nav />,
                <Main />,
                <Footer />
            ]
        )
  }
}function Header() {
    return (
        <header>
            This is a header
        </header>
    )
}function Main() {
    return (
        <main id='main'>
            Content goes here
        </main>
    )
}function Footer() {
    return (
        <footer>
            This is a footer
        </footer>
    )
}function Nav() {
    return (
        <Router>
            <nav>
                <ul>
                  <li><Link to="/">Home</Link></li>
                  <li><Link to="/about">About</Link></li>
                  <li><Link to="/test">Test</Link></li>
                </ul>
            </nav>
        </Router>
    )
}function Routes() {
    return (
        <Router>
            <div>
                <Route exact path="/" component={Home}/>
                <Route path="/about" component={About}/>
                <Route path="/test" component={Test}/>
            </div>
        </Router>
    )
}function Home() {
    return (
      <div>
        <h2>Home</h2>
      </div>
    )
}function About() {
    return (
      <div>
        <h2>About</h2>
      </div>
    )
}function Test() {
    return (
      <div>
        <h2>Test</h2>
      </div>
    )
}ReactDOM.render(
    <BasicExample />,
    document.getElementById('container')
);ReactDOM.render(
    <Routes />,
    document.getElementById('main')
);

Это выполнимо с реакцией-маршрутизатором или это нарушает какой-то основной принцип реагирования? Заранее спасибо за вашу помощь.

0 ответов