在 react-router-dom 中出现 404 错误 [英] getting 404 error in react-router-dom

问题描述

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

这是我的配置文件

从 'react' 导入 React从'react-dom'导入{渲染}import { createStore, applyMiddleware,compose } from 'redux'从'react-redux'导入{提供者}//从'./reducers'导入rootReducer从redux-logger"导入 createLogger从redux-thunk"导入 thunk从'react-router-dom'导入{BrowserRouter}从redux-promise-middleware"导入承诺从redux-logger"导入记录器从./action/UserAction"导入 {fetchUsers}从./action/ChartAction"导入 {fetchChart}从./action/SearchAction"导入 {fetchNames}从./reducers"导入减速器从./routes"导入路由const 中间件 = applyMiddleware(promise(), thunk, logger())const store= createStore(reducer,middleware)store.dispatch(fetchUsers());store.dispatch(fetchChart());使成为(<提供者商店={商店}><浏览器路由器>{路线}</BrowserRouter></提供者>,document.getElementById('root'))

我的路线文件

从./pages/App"导入应用从./pages/Users"导入用户从./pages/Charts"导入图表从反应"导入反应从react-router-dom"导入{路由}导出默认值 (<开关><Route path="/" component={App}/><Route path="/users" component={Users}/><Route path="/charts" name="charts" component={Charts}/></开关>);

App.js

import {Link} from "react-router-dom"从反应"导入反应const App = () =>(<div><h1>这是主页 </h1><Link to="charts">charts</Link>

)导出默认应用

Users.js

从react"导入 Reactconst 用户 = () =>(<div><h1>这是用户</h1>

)导出默认用户

Charts.js

从react"导入 Reactconst 图表 = () =>(<h1>这是图表</h1>)导出默认图表

更新 1:我不知道这是怎么回事.但我通过单击 url 来更改它正在工作的 routes.js 中的序列.但是如果我手动点击网址或在那里刷新它仍然无法正常工作.下面是我更新的 routes.js

从./pages/App"导入应用从./pages/Users"导入用户从./pages/Charts"导入图表从反应"导入反应从react-router-dom"导入 { Route,Switch }导出默认值 (<开关><Route path="/charts" component={Charts}/><Route path="/users" component={Users}/><Route path="/" component={App}/></开关>);

更新 2:如果我使用的是精确路径，那么顺序无关紧要.我想我没有正确理解精确路径的使用.但仍然在手动点击 url 或刷新时对我不起作用我最后的routes.js

从./pages/App"导入应用从./pages/Users"导入用户从./pages/Charts"导入图表从反应"导入反应从react-router-dom"导入 { Route,Switch }导出默认值 (<开关><路由精确路径="/" component={App}/><路由精确路径="/charts" component={Charts}/><路由精确路径="/users" component={Users}/></开关>);

解决方案

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

<HashRouter >{路线}</HashRouter></提供者>,document.getElementById('root')

I have started with react-router-dom. my main page rendered successfully but when I am clicking on hyper provided by Link component it is not redirecting but if I hit url manually it is giving me 404 error. please help me in this?

here is my config file

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

my routes file

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

UPDATE 1: I do not know what is going on. but I alter the sequence in routes.js it is working by clicking on url. but still if I hit the url manually or refresh there it is still not working. below is my updated 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>

);

UPDATE 2: if I am using exact path then sequence does not matter. I think I didn't understand use of exact path correctly. but still while hitting url manually or refreshing is not working for me 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 exact path="/" component={App}/>
  <Route  exact path="/charts"  component={Charts}/>
  <Route exact path="/users" component={Users}/>

 </Switch>

);

解决方案

After struggling I got a SO post saying that if my data is not mapping from backend I should use HashRouter. So I changed my browser so I changed my code to this. but I don't know why browser router didn't work

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

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

这篇关于在 react-router-dom 中出现 404 错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！