reactjs - 更改页面时如何让 React-Router 仅覆盖

Question

我的网站在所有页面上都有相同的页眉、导航栏和页脚。我正在使用 react-router，每次单击链接时，我都想用新页面内容覆盖 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')
);

这对 react-router 可行还是违反了一些基本的 reactjs 原则？在此先感谢您的帮助。

Answer 1

一些混合点

1)您需要一个包含您的 id 的 html 输出

2) 重复的路由器调用

3)你需要在switch语句下调用你的路由

在你的 html 中的某处:

<div id="container"></div>

jsx :

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link, Switch } 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 (
    <BrowserRouter >
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/test">Test</Link>
          </li>
        </ul>
      </nav>
    </BrowserRouter >
  );
}

function Routes() {
  return (
    <BrowserRouter >
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/test" component={Test} />
      </Switch>
    </BrowserRouter >
  );
}

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