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

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

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

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

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

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

1 个答案: