Question

我是React编程的新手。试图解决我的问题，但坚持以下问题。

我有以下反应路由器代码。

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; 

class Main extends Component {

render() {   
        return ( 
    <Router>
     <Switch>
       <Route exact path='/' component={Content} />   
       <Route path='/user/:id' component={User} /> 
       <Route path='*' component={NotFound} />
     </Switch>  
    </Router>
    );
}

export default Main

内容中包含带有照片的用户列表。如果我单击某人的照片，它将把我重定向到特定用户。

我写的代码如下：

<Link to={'/user/' + userItem.id}>
     <img className="useritem-img" src={userItem.photo} alt={userItem.tagline}/>
</Link>

点击图片后，它将使用新的网址正确打开用户组件，例如：http://localhost:3000/user/457365。

但是，当在新选项卡中复制并粘贴相同的URL时，它将不会打开。可能是我在某些地方错了。

任何帮助将不胜感激。

编辑：

打开该页面时出现以下错误：

无法获取/ user / 457365

我不是使用create-react-app而是简单的react应用程序。

以下是我的server.js

app.use(express.static('dist'));

app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, './index.html'));
});

app.listen(port, function (err) {
  if (err) {
        console.log(err);
    } else {
        open('http://localhost:' + port);
    }
})

Answer 1

如果收到该错误，则表示服务器正在尝试处理路由。因此，您应该确保服务器允许SPA处理路由。

例如，如果您使用的是express，则可能需要执行以下操作：

app.use(express.static(path.join(__dirname, 'client/build')));

app.get('/api/whatever', (req,res) => {
  // Whatever your api does
});

// Allow the SPA to take care of the routing
app.get('*', (req,res) =>{
    res.sendFile(path.join(__dirname+'/client/build/index.html'));
});

使用URL反应路由器打开页面

1 个答案: