javascript - react 应用程序中带有参数的 URL 在新的浏览器窗口或选项卡中不起作用

Question

我有使用 reduxAsp.netWebApi作为后端的 react-App。该站点具有tutors.jsx和tutorDetails.jsx组件。当用户点击组件中的导师列表时tutors.jsx，tutorDetails.jsx组件显示。

该链接在 urltutorId和fullName. 像 https://www.virtualcollege.pk/TutorDetails/1105/Sohail%20Anjum 的问题是，当我们复制 url 并在新的浏览器选项卡中打开它时，它不起作用。这是导师的实时链接： 导师列表实时链接 这是详细页面的实时链接：导师详细信息页面实时链接

这是tutorDetails.jsx组件的代码

import React, { useState, useEffect } from "react";
import { makeStyles } from '@material-ui/core/styles';
import {useDispatch,useSelector} from 'react-redux';
import { Link,useParams} from 'react-router-dom';
import * as actions from "../_actions/tutorActions";
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';



const useStyles = makeStyles({
  title: {
    fontSize: 14,
    display: 'flex',
  },
  pos: {
    marginBottom: 12,
  },
  card: {
    padding:10,
    marginTop:10,
    display: 'flex',
    flex:1,
  },
  cardAction: {
    display: 'block',
    textAlign: 'initial'
  },
  cardMedia: {
    width: 160,
  },
});

export default function TutorDetails(props) {
  const [loading, setLoading] = useState(true); 
  
let {tutorId}=useParams(); // get tutorId from url parameter
 
 
  let {fullName}=useParams();// get fullname from parameter
const dispatch = useDispatch();
  const classes = useStyles();
 const tutor = useSelector(state=>state.tutor.list)
  useEffect(() => {
    //call the action creator with dispatch
    //  and wait until the promise resolves
    actions
      .fetchById(tutorId)(dispatch)
       setLoading(false);
  }, []);

  return (
    <div>{loading === true ? <span>Loading ! Please waite...</span>:<div>
    <Card className={classes.card} variant="outlined">
      
    <CardContent>
    <Typography variant="h5" component="h2">
    {tutor[0].fullName} <br/> 
   

      </Typography>
    <Typography variant="h5" component="h2">
    {tutor[0].Qualification} 
      </Typography>
      <Typography className={classes.title} color="textSecondary" gutterBottom>
       category: {tutor[0].category}
      

      </Typography>
      
     
      <Typography variant="body2" component="p">
         experience:{tutor[0].experience}<br/>
        subject: {tutor[0].subject}<br/>
        Mobile: [phone]<br/>
        email: [e-mail]<br/>
        
       city: {tutor[0].city}<br/>
       
        </Typography>
        
 
             
    </CardContent>
      </Card>
      </div>}
      
      </div>
      
  );
  
}

这是tutors.jsx组件中url的链接。

    <Link to={`/TutorDetails/${record.tutorId}/${record.fullName}`}
> {record.fullName}</Link>

这是路由器链接App.js

    <Route path="/TutorDetails/:tutorId/:fullName" component={TutorDetails} />

App.js组件如下：

import React, { useEffect } from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { history } from '../_helpers';
import { alertActions } from '../_actions/alert.actions';
import { PrivateRoute} from '../_components/PrivateRoute';
import {TeacherCourses} from '../_components/TeacherCourses';
import TutorDetails from '../_components/TutorDetails';
import Tutors from '../_components/Tutors';
import { HomePage } from '../HomePage';
import { Container } from "@material-ui/core";
import { ThemeProvider } from '@material-ui/core/styles'
import CssBaseline from '@material-ui/core/CssBaseline'
import theme from '../theme'
import  { ToastProvider} from "react-toast-notifications";
import NewNavbar from "../_components/Header/NewNavbar";
import Footer from "../_components/Header/Footer";
import {carousel} from "react-responsive-carousel/lib/styles/carousel.min.css";

function App() {
 
    const alert = useSelector(state => state.alert);
    const dispatch = useDispatch();

    useEffect(() => {
        history.listen((location, action) => {
            // clear alert on location change
            dispatch(alertActions.clear());
        });
    }, []);

    return (
        <ThemeProvider theme={theme}>
        <CssBaseline />
        <ToastProvider autoDismiss={true}>
       <Container maxWidth="lg">
                    {alert.message &&
                        <div className={`alert ${alert.type}`}>{alert.message}</div>
                    }
                     
                    <Router history={history}>
                        <div>
                        <NewNavbar/>
                        <Switch>
                
                            <Route path="/TutorDetails/:tutorId/:fullName" component= {TutorDetails} />
                          

                            <Route path="/Tutors" component= {Tutors} />
                          
                            
                            <Route path="/MyCourses/:tutorId/" component= {MyCourses} />
                   
                            <Route path="/Enroll/:courseId/:courseTitle" component={Enroll} />
                            <Route  path="/" component={HomePage} />
                                      
                            <Redirect from="*" to="/" />
                        </Switch>
                       <Footer/>
                        </div>
                    </Router>
                   
                    </Container>
        </ToastProvider>
        </ThemeProvider>
    );
}

export {App} ;

标签： javascriptreactjsreact-routerreact-hooksreact-router-dom