react-router-dom給我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

您可以使用react-router-dom的Link 組件 ：

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

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

這將生成一個<a>標記，但將遵守客戶端路由

Answer 2

這是解決方案！

從exact path = '/foo'刪除exact

有了標簽，頁面將被加載，因此最好使用<Link to='/foo'>roster</Link>

這是您可以參考的示例

Answer 3

您可以從react-router導入{Link}，它會提供一個標簽，您可以重定向