在 react-router-dom 中出现 404 错误

Question

我已经开始使用 react-router-dom。我的主页已成功呈现，但是当我单击 Link 组件提供的 hyper 时，它不会重定向，但如果我手动单击 url，则会出现 404 错误。请帮我解决这个问题？

这是我的配置文件

import React from 'react'
import { render } from 'react-dom'
import { createStore, applyMiddleware,compose } from 'redux'
import { Provider } from 'react-redux'
//import rootReducer from './reducers'
import createLogger from 'redux-logger'
import thunk from 'redux-thunk'
import {BrowserRouter} from 'react-router-dom'

import promise from "redux-promise-middleware"
import logger from "redux-logger"
import {fetchUsers} from "./action/UserAction"
import {fetchChart} from "./action/ChartAction"
import {fetchNames} from "./action/SearchAction"
import reducer from "./reducers"
import routes from "./routes"

const middleware = applyMiddleware(promise(), thunk, logger())
const store= createStore(reducer,middleware)

store.dispatch(fetchUsers());
store.dispatch(fetchChart());
render(
  <Provider store={store}>
    <BrowserRouter >
      {routes}
    </BrowserRouter>

  </Provider>,
  document.getElementById('root')
)

我的路线文件

import App from "./pages/App"
import Users from "./pages/Users"
import Charts from "./pages/Charts"
import React from "react"
import { Route } from "react-router-dom"
export default (
  <switch>
  <Route path="/" component={App}/>
  <Route path="/users" component={Users}/>
    <Route path="/charts" name="charts" component={Charts}/>
 </switch>

);

App.js

import {Link} from "react-router-dom"
import React from "react"
const App = () =>(

<div>
<h1> this is main page </h1>
<Link to="charts">charts</Link>
</div>
)

export default App

Users.js

import React from "react"
const User = () =>(
    <div>
    <h1> this is user </h1>
    </div>
)

export default User

Charts.js

import React from "react"
const Chart = () => (
    <h1> this is chart </h1>
)

export default Chart

更新 1：我不知道发生了什么事。但我改变了 routes.js 中的顺序，它通过单击 url 来工作。但如果我手动点击 url 或在那里刷新它仍然无法正常工作。下面是我更新的 routes.js

import App from "./pages/App"
import Users from "./pages/Users"
import Charts from "./pages/Charts"
import React from "react"
import { Route,Switch } from "react-router-dom"

export default (
  <Switch>
    <Route  path="/charts"  component={Charts}/>
    <Route  path="/users" component={Users}/>
  <Route path="/" component={App}/>


 </Switch>

);

更新 2： 如果我使用的是精确路径，那么顺序并不重要。我想我没有正确理解确切路径的使用。但仍然在手动点击 url 或刷新时对我不起作用我的决赛 routes.js

import App from "./pages/App"
import Users from "./pages/Users"
import Charts from "./pages/Charts"
import React from "react"
import { Route,Switch } from "react-router-dom"

export default (
  <Switch>


  <Route exact path="/" component={App}/>
  <Route  exact path="/charts"  component={Charts}/>
  <Route exact path="/users" component={Users}/>

 </Switch>

);

Answer 1

在挣扎之后我得到了一个 SO post 说如果我的数据不是从后端映射我应该使用 HashRouter。所以我改变了我的浏览器，所以我改变了我的代码。但我不知道为什么浏览器路由器不起作用

<Provider store={store}>
    <HashRouter >
      {routes}
    </HashRouter>

  </Provider>,
  document.getElementById('root')

Answer 2

如果你使用的是 webpack 添加这个

devServer: {
    historyApiFallback: true,
}

当使用 BrowserRouter 时“historyApiFallback”应该是 true

在 react-router-dom 中出现 404 错误

getting 404 error in react-router-dom

reactjs

react-redux

react-router-v4