Question

以下代码段效果很好，

<Router history={history}>
    <ErrorBoundary>
        <Suspense fallback={<div className="loadingMessage">Loading...</div>}>
            <div className="home">
                <Header />
                <Switch>
                    <Route exact path="/" component={Home} />
                    <Route path="/a" component={A} />
                    <Route path="/b" component={B} />
                    <Route path="/c" component={C} />
                    <Route path="/d" component={D} />
                    <Route path="/f" component={F} />
                    <Route path="/g" component={G} />
                    <Redirect from="*" to="/" />
                </Switch>
            </div>
        </Suspense>
    </ErrorBoundary>
</Router>

但是，当按以下方式进行更改时，它将重定向到路径“ /”。我只是将路由呈现为数组。为什么应该更改默认行为。

const routes = routesList.map((item, index) => {
    return <Route key={index} path={item.route} component={item.component}/>
})
return (
    <Router history={history}>
        <ErrorBoundary>
            <Suspense fallback={<div className="loadingMessage">Loading...</div>}>
            <div className="home">
                <Header />
                <Switch>
                    {routes}
                    <Redirect from="*" to="/" />
                </Switch>
            </div>
            </Suspense>
        </ErrorBoundary>
    </Router>
);

其中routeList是一个包含url和component作为属性的对象数组。

Answer 1

如果我理解正确，则可以将报价“” 更改为”，并将您的路线放在小报价之间。

Answer 2

我写了这段代码，对我来说很好用。请对其进行测试，并将其与您的进行比较。

import React from 'react';
import Home from './Home';
import A from './A';
import B from './B';
import {
    BrowserRouter as Router,
    Switch,
    Route,    
    Redirect
  } from "react-router-dom";


export const MainRouter = ({children}) => {    
    const routesList = [{route: '/a', component: A}, {route: '/b', component: B}]
    const routes = routesList.map((item, index) => {
        return <Route key={index} path={item.route} component={item.component}/>
    })
    return (
        <Router>

            <div className="home">
                <Switch>
                    <Route exact path="/" component={Home} />
                    {routes}
                    <Redirect from="*" to="/" />
                </Switch>
            </div>


</Router>
    );
};

export default MainRouter;

实际上不知道代码中的问题是什么。也许，如果您发送的内容更完整，它会有所帮助。

当Route作为数组传递时，它不起作用

2 个答案: