更改反应路由器链接的顺序答案

【问题标题】：change order of react router links更改反应路由器链接的顺序
【发布时间】：2019-12-14 10:17:57
【问题描述】：

在 DOM 的上下文中，如何更改 react 路由器设置的链接顺序？

看下面的例子：

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

但一切都是空白，没有错误。

我觉得这个答案 - Using React-Router with a layout page or multiple components per page - 可能是我正在寻找的，但老实说我不明白。

如何更改 react 路由器链接的顺序？

【问题讨论】：

把你的Routes放在你的链接后面。问题解决了
React 的 JSX 输出的 DOM 元素与通常的 HTML 相同。因此，元素的呈现顺序与它们在源代码中的写入顺序相同。只需将链接放在您的路线之前。

标签： javascript reactjs react-router

【解决方案1】：

正如@azium 在 cmets 中所说，您需要重新排序 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')
);

【讨论】：