react-router v4.2.2 开关不工作；始终显示主要组件

Posted 2023-02-22

【中文标题】react-router v4.2.2 开关不工作；始终显示主要组件

【英文标题】：react-router v4.2.2 Switch isn't working; always showing the main component

【发布时间】：2018-06-04 14:13:47

【问题描述】：

我正在使用 react-router 将主页上的一组卡片定向到其他单独的页面。但是，当我单击一张卡片时，新页面会在卡片组下方呈现，而我只想呈现新页面。我认为问题可能与我的 App.js 将主页放在其中有关，但我不知道我应该把它放在哪里，是否应该有一个单独的链接等等？我将不胜感激任何帮助！谢谢你

这里是 App.js 的代码

import React from 'react';
import Routes from '../containers/routes.js';
import ProjectCards from '../containers/project_cards.js';

export default class App extends React.Component 
    render() 
        return(
            <div>
                <ProjectCards />
                <Routes />
            </div>
        );
    

这里是主容器：

import React from 'react';
import  connect  from 'react-redux';
import  Link  from 'react-router-dom';
import ProjectCard from '../components/project_card.js';
import Project1 from '../components/project1.js';

class ProjectCards extends React.Component 
    render() 
        var projectCards = this.props.projects.map((project, i) => 
            return (
                <div key=i>
                    <Link to=`/$project.title`>
                        <ProjectCard title=project.title date=project.date focus=project.focus/>
                    </Link>
                </div>
            );
        );
        return (
            <div>projectCards</div>
        );
    


function mapStateToProps(state) 
    return 
        projects: state.projects
    ;


export default connect(mapStateToProps)(ProjectCards);

这里是路由容器：

import React from 'react';
import Project1 from '../components/project1.js';
import  connect  from 'react-redux';
import  Route, Switch  from 'react-router-dom';
import  withRouter  from 'react-router';

class Routes extends React.Component
    render() 
        var createRoutes = this.props.projects.map((project, i) => 
            return <Route key=i exact path=`/$project.title` exact component=Project1/>
        );
        return (
            <Switch>
                createRoutes
            </Switch>
        );
    


function mapStateToProps(state) 
    return 
        projects: state.projects
    ;


export default withRouter(connect(mapStateToProps)(Routes));

【问题讨论】：

把路由想象成另一个组件，它会渲染 switch 语句的结果。您也想将 ProjectCards 移动到路线中，这只是另一条路线。

谢谢，我这样做了，并将所有路由移到 app.js 中，现在一切正常。

【参考方案1】：

将您的 App 文件设置为所有组件的入口，例如

import React,  Component  from 'react';
import  BrowserRouter, Switch, Route  from 'react-router-dom';

import Home from '../../ui/components/user/home/Home.jsx';
import Header from './header/Header.jsx';
import Fakebook from '../../ui/components/user/fakebook/Fakebook.jsx';
import Dashboard from '../../ui/components/user/dashboard/Dashboard.jsx';
import NotFound from '../../ui/pages/NotFound.jsx';

export default class App extends Component
   render()
     return (
       <BrowserRouter>
         <div>
         <Header />
           <Switch>
              <Route exact path="/" component=Fakebook/>
              <Route exact path="/Home" component=Home/>
             <Route exact path="/Dashboard" component=Dashboard />
             <Route exact path="/Dashboard/:userId" component=Dashboard/>
             <Route component=NotFound/>
           </Switch>
         </div>
       </BrowserRouter>
     )
   
 

现在，如果您研究它，您会注意到一个不在路由中的<Header /> 组件。我这样做是因为我的标题在我的整个应用程序中是不变的。 这就是我设置路线的方式我将路线设置为 index.js 文件之后的第二个文件，这样我的所有路线都可以看到。

【讨论】：

非常感谢！我将代码从路由容器移到 app.js 中，现在一切都很完美。谢谢！