react-router-dom给我404

Question

我开始将路由添加到我的应用程序，问题是即使渲染它们后，我也无法访问它们（获取404）。我尝试了this，this和this，但无法使其正常工作。这是我的索引

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

您可以使用Link中的react-router-dom component：

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

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

这将生成一个<a>标签，但会遵循客户端路由

Answer 2

这是解决方案！

从exact删除exact path = '/foo'

使用标签，页面将被加载，因此最好使用<Link to='/foo'>roster</Link>

这是您可以参考的example

Answer 3

您可以从react-router导入{Link}，它会提供一个标签，您可以重定向