React JSX: как добавить пробел между ссылками навигации в моей панели навигации

Question

В настоящее время мой сайт выглядит ниже.У меня есть три ссылки в моей навигационной панели, и я пытаюсь сделать их более разнесенными.

render() {
    return (
      <Router>
        <div>
          <nav>
            <Link to="/admin/dashboard">Upload Eyeball</Link>
            <span></span>
            <Link to="/admin/dashboard">Diagnostic Prediction</Link>
            <Link to="/admin/dashboard">Reject Prediction</Link>
          </nav>
          <h1>Diabetic Retinopathy Diagnosis</h1>
          {/* localhost */}
          <Route exact path="/" component={EyeballLoadComp} />
          <Route exact path="/diagnosis" component={EyeballDiagnosis} />
          <Route exact path="/update/:eyeballId" component={UpdateEyeball} />
        </div>
      </Router>
    );

Я пытался добавить туда промежуток, чтобы освободить ссылки, но он не работал.

Как это исправить?

Answer 1

Вы можете просто передать style или className проп

https://codesandbox.io/s/charming-saha-g196f

<Link to="/" style={{ marginRight: 10 }}>Home</Link>

Answer 2

Простой способ сделать это - создать класс CSS в вашем файле CSS:

.navBarLink {
  margin: 5px;
}

И затем использовать этот класс в своих ссылках:

<nav>
    <Link className='navBarLink' to="/admin/dashboard">Upload Eyeball</Link>    
    <Link className='navBarLink' to="/admin/dashboard">Diagnostic Prediction</Link>
    <Link className='navBarLink' to="/admin/dashboard">Reject Prediction</Link>
</nav>

Почему?Интервалы и разметка должны выполняться в CSS, а встроенные стили (с использованием HTML-тэга 'style') обычно считаются плохой практикой.

Answer 3

<nav>
   <Link to="/admin/dashboard">Upload Eyeball</Link>{' '}
   <Link to="/admin/dashboard">Diagnostic Prediction</Link>{' '}
   <Link to="/admin/dashboard">Reject Prediction</Link>{' '}
</nav>

{''} сделает это, но это хак, я бы порекомендовал использовать CSS:

<nav>
   <Link to="/admin/dashboard" style{{marginRight: '5px'}}>Upload Eyeball</Link>
   <Link to="/admin/dashboard" style{{marginRight: '5px'}}>Diagnostic Prediction</Link>
   <Link to="/admin/dashboard">Reject Prediction</Link>
</nav>

или создать класс 'navLink' и ссылку на стиль так, как вы хотите

<nav>
   <Link className='navLink' to="/admin/dashboard">Upload Eyeball</Link>
   <Link className='navLink' to="/admin/dashboard">Diagnostic Prediction</Link>
   <Link className='navLink' to="/admin/dashboard">Reject Prediction</Link>
</nav>