Реакция-роутер-дом дает мне 404

Question

Я начал добавлять маршруты в свое приложение, проблема в том, что даже после рендеринга я не могу получить к ним доступ (получите 404).Я пытался это , это и это , но я не могу заставить его работать.Это мой индекс

import React from 'react'
import ReactDOM from 'react-dom';
import App from './containers/App';
import { BrowserRouter } from 'react-router-dom';

import './index.css';

const app = (
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

ReactDOM.render(app, document.getElementById('root'));

, а мой App.jsx просто

import React, { Component } from 'react';
import {Route, Switch} from 'react-router-dom';

class App extends Component {

  render() {

    return (
      <div>
        <Switch>
          <Route exact path = '/foo' render = {() => <h1>foo</h1>} />
          <Route exact path = '/' render = {() => <h1>Home</h1>} />
        </Switch>
        <a href = '/foo'>Go to foo</a>
      </div>
    )
  }

}

export default App;

Теоретически, если я нажму на тег привязки, я буду перенаправлен на путь foo,но вместо этого я получаю 404. Любое предложение очень ценится

Answer 1

Вот решение!

Удалить exact из exact path = '/foo'

С тегом страница будет загружена, поэтому лучше использовать <Link to='/foo'>roster</Link>

Вот пример , который вы можете сослаться

Answer 2

Вы можете импортировать {Link} из реагирующего маршрутизатора, он дает тег, и вы можете перенаправить

Answer 3

Вы можете использовать Link компонент из react-router-dom:

import { Link } from 'react-router-dom'

<Link to="/foo">Go to foo</Link>

Это сгенерирует тег <a>, но будет учитывать маршрутизацию клиента