更改反應路由器鏈接的順序

Question

在DOM上下文中，如何更改反應路由器設置的鏈接順序？

請參見以下示例：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import 'bootstrap/dist/css/bootstrap.css';
import Counter from './components/counter';
import Counters from './components/counters';
import ColorPicker from './components/colorpicker';

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

ReactDOM.render(
  <main className="content-area">
    <Router>
        <Route path="/counter" component={Counter} />
        <Route path="/color-picker" component={ColorPicker} />
        <ul>
          <li>
            <Link to="/">Main Page</Link>
          </li>
          <li>
            <Link to="/counter">Counter</Link>
          </li>
          <li>
            <Link to="/color-picker">Color Picker</Link>
          </li>
        </ul>
    </Router>
  </main>,
  document.getElementById('root')
);

這是輸出：

鏈接需要在輸出組件的上方，因此：

但是我不知道如何解決這個問題，並且在堆棧溢出時沒有有用的答案。

我試過了：

ReactDOM.render(
  document.getElementById('root'),
  <main className="content-area">
    <Router>
        <Route path="/counter" component={Counter} />
        <Route path="/color-picker" component={ColorPicker} />
        <ul>
          <li>
            <Link to="/">Main Page</Link>
          </li>
          <li>
            <Link to="/counter">Counter</Link>
          </li>
          <li>
            <Link to="/color-picker">Color Picker</Link>
          </li>
        </ul>
    </Router>
  </main>
);

但是，一切都一片空白，沒有任何錯誤。

我感覺像這樣的答案- 將React-Router與布局頁面或每頁面多個組件一起使用 -可能是我在尋找的東西，但老實說我不理解。

如何更改反應路由器鏈接的順序？

Answer 1

就像@azium在評論中說的那樣，您需要重新排序html代碼以將鏈接放置在路由之前，而不是重新排列ReactDOM.render方法的參數。

ReactDOM.render(
  <main className="content-area">
    <Router>
        <ul>
          <li>
            <Link to="/">Main Page</Link>
          </li>
          <li>
            <Link to="/counter">Counter</Link>
          </li>
          <li>
            <Link to="/color-picker">Color Picker</Link>
          </li>
        </ul>
        <Route path="/counter" component={Counter} />
        <Route path="/color-picker" component={ColorPicker} />
    </Router>
  </main>,
  document.getElementById('root')
);