Reactjs 在react路由器dom中获取404错误

我从dom开始。我的主页成功呈现，但当我点击

链接
组件提供的超链接时，它并没有重定向，但如果我手动点击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')
)

从“React”导入React
从'react dom'导入{render}
从“redux”导入{createStore，applyMiddleware，compose}
从“react redux”导入{Provider}
//从“./reducers”导入rootReducer
从“redux logger”导入createLogger
从“redux thunk”导入thunk
从“react router dom”导入{BrowserRouter}
从“redux承诺中间件”导入承诺
从“redux记录器”导入记录器
从“/action/UserAction”导入{fetchUsers}
从“/action/ChartAction”导入{fetchChart}
从“/action/SearchAction”导入{fetchNames}
从“/减速器”导入减速器
从“/routes”导入路由
const middleware=applyMiddleware（promise（），thunk，logger（））
const store=createStore（减速机、中间件）
dispatch（fetchUsers（））；
store.dispatch（fetchChart（））；
渲染(
{routes}
,
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>

);

从“/pages/App”导入应用程序
从“/pages/Users”导入用户
从“/pages/Charts”导入图表
从“React”导入React
从“react router dom”导入{Route}
导出默认值(
);

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

从“react router dom”导入{Link}
从“React”导入React
常量应用=（）=>(
这是主页
图表
)
导出默认应用程序

Users.js

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

export default User

从“React”导入React
常量用户=（）=>(
这是用户
)
导出默认用户

Charts.js

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

export default Chart

从“React”导入React
常数图=（）=>(
这是图表
)
导出默认图表

更新1：
我不知道发生了什么事。但是我在routes.js中通过点击url改变了它的工作顺序。但是，如果我手动点击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>

);

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>

);

从“/pages/App”导入应用程序
从“/pages/Users”导入用户
从“/pages/Charts”导入图表
从“React”导入React
从“react router dom”导入{Route，Switch}
导出默认值(
);

更新2:
若我使用的是精确路径，那个么序列就无关紧要了。我想我没有正确理解确切路径的用法。但手动点击url或刷新对我来说仍然不起作用
my final 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>

);

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>

);

从“/pages/App”导入应用程序
从“/pages/Users”导入用户
从“/pages/Charts”导入图表
从“React”导入React
从“react router dom”导入{Route，Switch}
导出默认值(
);
在苦苦挣扎之后，我收到一篇SO帖子，说如果我的数据不是从后端映射的，我应该使用HashRouter。所以我改变了我的浏览器，所以我把我的代码改成了这个。但我不知道为什么浏览器路由器不工作

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

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


{routes}
,
document.getElementById（'root'））
在苦苦挣扎之后，我收到一篇SO帖子，说如果我的数据不是从后端映射的，我应该使用HashRouter。所以我改变了我的浏览器，所以我把我的代码改成了这个。但我不知道为什么浏览器路由器不工作

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

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


{routes}
,
document.getElementById（'root'））
如果您使用的是网页，请添加此

devServer: {
    historyApiFallback: true,
}

使用BrowserRouter时，“历史APIfallback”应为true
如果您使用的是webpack，请添加此选项

devServer: {
    historyApiFallback: true,
}

当使用BrowserRouter时，historyApiFallback“应该是真的
即使没有重定向，链接是否也在更改，并且在Oleya url正在更改且无错误时是否存在任何错误您能否从“react router”导入{Switch}，并用
Switch
替换
Switch
是来自react router dom还是react router？我试过用前一个。没有luckI从
react router使用它
即使没有重定向，链接也在更改，并且在Oleya url正在更改和没有错误时是否存在任何错误您可以从“react router”导入{Switch}，并将
Switch
替换为
Switch
是从react router dom还是react router？我试过用前一个。没有luckI从
react路由器使用它