我设置了一个带有服务器端渲染和两个路由的react路由器，其中一个路由应该将我重定向到某个页面，当前是"/popular/php"，但这不起作用，它不会将我重定向到任何地方，如果我删除重定向组件并只在"/“路径上渲染一些内容，那么它就可以工作。

我有这个路由文件。

import Home from './Home.js';
import Grid from './Grid.js';
import { fetchPopularRepos } from './api';

const routes = [
    {
        path: '/popular/:id',
        component: Grid,
        fetchInitialData: (path = '') => fetchPopularRepos (
            path.split('/').pop()
            )
    }
] 

export default routes

这是完成路由的App组件。如果我没有弄错的话，那么如果我点击"/“url，重定向组件应该会把我送到"/popular/php”页面，但是当我点击"/“url时什么也没有发生。

import React from 'react';
import Grid from './Grid.js';
import routes from './routes';
import { Route, Switch, Redirect } from 'react-router-dom'
import Navbar from './Navbar';
import Login from './Login';

class App extends React.Component {
    render() {
        return (
            <div>
            <Navbar />
            <Switch>
            <Route exact path="/" render={() => (
                <Redirect to="/popular/php"/>)} />
               {routes.map(({ path, exact, component: C, ...rest }) => (
                  <Route
                    key={path}
                    path={path}
                    exact={exact}
                    render={(props) => (
                      <C {...props} {...rest} />
                    )}
                  />
                ))}
             </Switch>
            </div>
            )
        }
}

export default App

Server.js

import express from 'express';
import cors from 'cors';
import { renderToString } from 'react-dom/server';
import App from '../shared/App.js';
import React from 'react';
import serialize from 'serialize-javascript';
import { matchPath, StaticRouter } from 'react-router-dom';
import routes from '../shared/routes.js';


const app = express();

app.use(cors());

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

app.get('*', (req, res, next) => {
    const activeRoute = routes.find(
        (route) => matchPath(req.url, route)) || {};

    const promise = activeRoute.fetchInitialData ?
            activeRoute.fetchInitialData(req.path) 
                : Promise.resolve();

    promise.then((data) => {    
        const context = { data }; 
        const markup = renderToString( 
            <StaticRouter location={req.url} context={ context }>
                <App />
        </StaticRouter>);
        res.send(`<!DOCTYPE html>
            <html>
                <head>
                    <title>SSR with RR</title>
                    <script src="/bundle.js"></script>
                    <script>window.__INITIAL_DATA__ = ${serialize(data)}</script>  
                </head>
                <body>
                    <div id="app">${markup}</div>
                </body>
            </html>`)

        }).catch(next);
})

app.listen(3000, () => {
    console.log("Server is running on port 3000");
})

转载请注明出处:http://www.mingweiauto.com/article/20230526/989285.html

随机推荐

  1. React路由器锚链路

    我对一些组件使用react，并且在react根目录之外有一个导航菜单。当我点击菜单链接时，我想改变根目录中的react组件。我搜索了一下，发现react-router是一个解决方案，但我不知道该怎么做。还要注意的是，我不想使用Hash ur...

  2. 页面重定向后，activeClassName在react路由器NavLink中不起作用

    我的应用程序中有react router NavLinks。其中之一如下：NavLink exact to = {{pathname: /, state: {genreId: 0}}} activeClassName = active-me...

  3. 用户登录后，React路由器未重定向

    我有一个关于React Router和重定向的小问题。在我创建了一个受管理员保护的路由之后，我希望用户在登录后被重定向到user dashboard“。但我的问题是重定向不起作用。一切都是这样发生的：我的导航组件，但我认为这个组件还可以：i...

  4. 在react路由器v4中重定向经过身份验证的用户

    我使用react js和firebase创建了一个简单的登录应用程序。当我注册时，它将在firebase中创建一个用户，我需要将用户定向到另一个页面我的Index.js文件，如下所示import React from react; impo...

  5. React路由器专用路由异步使用效果

    基本上，我面临的问题是，如果有人删除cookie，我的路由将无法正常工作。我正在使用Auth0和React路由器。我不明白的是为什么它会跳过if语句。不知道为什么它不会被点击，然后它会重定向到登录。调试代码：??供参考的实际代码：impor...

  6. 使用重定向/时，React路由器history.goBack不起作用

    在React应用程序中，我使用Router的方式如下：let path=/; if(condition){ path=/dashboard }else if(condition){ path=/login } Router ...

  7. React路由器重定向在专用路由中不起作用

    我有这个私有路由组件，它只用于在用户登录时呈现组件，否则它应该重定向到登录页面。const PrivateRoute = ({ component: Component, ...rest }) = ( Route {...rest}...

  8. 专用路由React路由器始终重定向到第一路由

    实际上，我可以通过点击按钮来引导到另一条路线，但不知何故，我不能通过更改URL来手动引导。每次我要更改URL (例如: localhost:3000/proposal)时，它总是将我引导到第一个Route。以下是按顺序排列的路由：Switc...

  9. React路由器URL正常工作，但组件不起作用

    React Router会更改URL，但不会更新组件。我检查了许多来自StackOverflow的解决方案，但它仍然不起作用。下面是我的代码: App.js：function App() { return ( div c...

  10. 未找到页面和默认主页始终重定向到home - React路由器

    我有这个代码，我总是把它重定向到家的不存在的路由。我希望当不存在的路由被输入时重定向到/404，并且当没有或/被输入时它被重定向到主目录。 Switch Route exact path...