解决react-router browserrouter刷新后404 或者js文件报错的问题

本文介绍了如何在Node.js应用程序中正确配置静态文件服务及端口设置,通过使用Express框架来处理不同路由请求并发送正确的文件响应。文章还讨论了在特定端口下如何解决路径问题。

1:引用了官方的node的方法,在serverjs里面添加get *这个命令,确实可以,但要转到9093端口,8080不行,同时修改了绝对路径,8080端口找不到js文件,但是9093端口可以;<script type="text/javascript" src="/bundle.js"></script>;反正这样也能用,。

2:app.use(express.static(__dirname + '/build'))
// 在你应用 JavaScript 文件中包含了一个 script 标签
// 的 index.html 中处理任何一个 route
app.get('*', function (request, response){
 response.sendFile(path.resolve(__dirname, 'build', 'index.html'))
})
//app.listen(port)
//console.log("server started on port " + port)
app.use(function(req,res,next){
if(req.url.startsWith('/user/')||req.url.startsWith('/')||req.url.startsWith('/data/')){
return next        //我们是没有user,没有statec路径的
}else{
console.log('path',path.resolve('../build/'))
return res.sendFile(path.resolve('../build/'))//修正路径的问题
}
})
app.use('/',express.static(path.resolve('../build')))
server.listen(9093,(req,res)=>{
console.log("连接9093成功")
})


react-router-dom是React官方推荐的路由库,它可以实现在单页应用中切换组件而不刷新整个页面。 首先,需要在React项目中安装react-router-dom库: ```bash npm install react-router-dom ``` 然后,在应用入口文件中,引入BrowserRouter组件,包裹整个应用,即可实现路由的切换。 ```javascript import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; import App from './App'; ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById('root') ); ``` 接下来,可以在App组件中配置路由,使用Route组件指定路由对应的组件。 ```javascript import React from 'react'; import { Route, Switch } from 'react-router-dom'; import Home from './components/Home'; import About from './components/About'; import Contact from './components/Contact'; function App() { return ( <div> <nav> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/about">About</Link></li> <li><Link to="/contact">Contact</Link></li> </ul> </nav> <Switch> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> </Switch> </div> ); } export default App; ``` 在上面的例子中,使用了Link组件指定了三个路由,分别对应Home、About和Contact组件。而Switch组件则是用来包裹Route组件的,它会按照路由的顺序,从上到下依次匹配,并只渲染第一个匹配到的组件。 需要注意的是,当使用Link组件时,需要确保BrowserRouter组件已经包裹整个应用。否则会报错。 使用react-router-dom库可以非常方便地实现路由切换,避免了整个页面的刷新,提高了应用的性能。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值