react-router-dom 给了我 404答案

【问题标题】：react-router-dom gives me 404react-router-dom 给了我 404
【发布时间】：2018-11-23 13:34:47
【问题描述】：

我开始向我的应用程序添加路由，问题是即使在我渲染它们之后我也无法访问它们（得到 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。任何建议都非常感谢

【问题讨论】：

从 '/foo' 中删除确切的路径 - 只需使用 path = '/foo'。还有你在 path 和 = 之间的间距
你不能在这里使用<a href="/foo">。单击链接后，您的浏览器会向服务器请求具有相同 URL 的资源，但您需要在客户端使用 React Router 进行导航
@LukeWalker <Route path = '/foo' render = {() => <h1>foo</h1>} />，给我同样的问题
<Route> 没有任何问题。这就是浏览器的工作方式。有几种不同的方法可以解决这个问题

标签： javascript reactjs react-router

【解决方案1】：

你可以使用Linkcomponent的react-router-dom:

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

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

这将生成一个<a> 标记，但会尊重客户端路由

【讨论】：

感谢 Sagiv，这实际上解决了它。你知道为什么我在浏览器上直接输入localhost/foo 会得到404吗？
浏览器就是这样工作的：你点击链接（输入 url），浏览器默认会访问给定的 URL。但是您的服务器未配置为为每个客户端路由返回页面。如果您已经配置了带有井号 (#) 的路由，那么浏览器将不会向服务器发送请求
您需要将服务器配置为为每个路由返回相同的html 文件（您的应用程序入口点）。
你运行的是什么类型的服务器？
这只是本地测试

【解决方案2】：

这是解决方案！

从exact path = '/foo' 中删除exact

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

这里是example，你可以参考

【讨论】：

【解决方案3】：

你可以从 react-router 导入 {Link} 它给出一个标签，你可以重定向

【讨论】：