change order of react router links

Question

In the context of the DOM how do I change the order of how the links for a react router setup?

See the following example:

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

This is the output:

The links need to be above the outputted component, so:

But I don't know how to figure it out, and there are no helpful answers on stack overflow.

I tried:

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

But everything goes blank with no errors.

I feel like this answer - Using React-Router with a layout page or multiple components per page - could be what I'm looking for but to be honest I don't understand it.

How do I change the order of react router links?

React's `JSX` outputs DOM elements same as in usual `HTML`. So elements are rendered in same order as they are written in your source code. Just put links before your routes. — Jax-p, Aug 06 '19 at 20:15

score 2 · Accepted Answer · answered Aug 06 '19 at 20:11

As @azium said in the comments, you need to reorder your html code to put the links before the routes, not reorder the arguments of the ReactDOM.render method.

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

change order of react router links

1 Answers1