[英]React-router-dom not rendering component and Getting error GET http://localhost:8080/editor 404 (Not Found)
[英]getting 404 error in react-router-dom
我已經開始使用react-router-dom。 我的主頁成功渲染,但是當我單擊Link
組件提供的超級Link
它沒有重定向,但是如果我手動點擊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 :我不知道發生了什么。 但是我通過單擊url更改了routes.js中的序列,它可以正常工作。 但是,即使我手動點擊網址或刷新網址,仍然無法正常工作。 下面是我更新的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或刷新時對我來說我的最終route.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>
);
掙扎之后,我收到一條SO帖子,說如果我的數據不是從后端映射的,則應使用HashRouter。 因此,我更改了瀏覽器,因此將代碼更改為此。 但我不知道為什么瀏覽器路由器不起作用
<Provider store={store}>
<HashRouter >
{routes}
</HashRouter>
</Provider>,
document.getElementById('root')
如果您使用的是webpack,請添加
devServer: {
historyApiFallback: true,
}
使用BrowserRouter“historyApiFallback”的時候應該是真實的
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.