bekommen 404 Fehler in react-router-dom

Question

Ich habe mit react-router-dom gestartet. Meine Hauptseite wurde erfolgreich gerendert, aber wenn ich auf die Hyper-Komponente Link klicke, wird sie nicht umgeleitet, aber wenn ich manuell auf die URL klicke, bekomme ich 404 Fehler. Bitte hilf mir dabei?

hier ist meine Config-Datei

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') 
) 

meine Routen

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 

Datei 0

Charts.js

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

export default Chart 

UPDATE 1: Ich weiß nicht, was los ist. aber ich ändere die Reihenfolge in routes.js es funktioniert, indem Sie auf URL klicken. aber immer noch, wenn ich die URL manuell drücke oder dort auffrische, funktioniert es immer noch nicht. unten ist routes.js mein aktualisiert

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> 

); 

UPDATE 2: wenn ich genauen Pfad verwenden dann Reihenfolge keine Rolle spielt. Ich glaube, ich habe den genauen Pfad nicht richtig verstanden. aber noch während url manuell Schlagen oder erfrischende arbeitet nicht für mich meine letzte 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

Nach dem Kampf Ich habe ein SO Post sagen, dass, wenn meine Daten nicht von Back-End-Mapping wird, sollte ich HashRouter verwenden. Also habe ich meinen Browser geändert, also habe ich meinen Code geändert. aber ich weiß nicht, warum Browser-Router nicht funktioniert

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

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

Answer 2

Wenn Sie mit webpack fügen Sie diese

devServer: { 
    historyApiFallback: true, 
} 

bei der Verwendung von BrowserRouter "historyApiFallback" wahr sein sollte