路由参数为空的话自动跳转到404

来源：10-9 【综合运用】搜索页面

慕村0538170

2022-07-07

// import {useState} from 'react'
import styles from './App.module.css'
import {BrowserRouter, Route, Routes} from 'react-router-dom'
import {HomePage, SignIn, RegisterPage, DetailPage, SearchPage} from './pages'
function App() {
  return (
    <div className={styles.App}>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<HomePage />}></Route>
          <Route path="/signIn" element={<SignIn />}></Route>
          <Route path="/register" element={<RegisterPage />}></Route>
          <Route path="/detail/:touristRouteId" element={<DetailPage />}></Route>
          <Route path="/search/:keywords?" element={<SearchPage />}></Route>
          <Route path="*" element={<h1>404 not found 页面去哪儿了</h1>}></Route>
        </Routes>
      </BrowserRouter>
    </div>
  )
}
export default App

跳转路由的写法

  <Input.Search placeholder="请输入旅游目的地、主题、或关键字" className={styles['search-input']} onSearch={keyword => navigate('/search/' + keyword)} />

PS <Route path="/search/:keywords" element={}> 不加问号也一样

附带package.json

{
  "name": "react-travel",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@ant-design/icons": "^4.7.0",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.11.41",
    "@types/react": "^18.0.14",
    "@types/react-dom": "^18.0.5",
    "antd": "^4.21.4",
    "axios": "^0.27.2",
    "i18next": "^21.8.11",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-i18next": "^11.17.3",
    "react-redux": "^8.0.2",
    "react-scripts": "5.0.1",
    "redux": "^4.2.0",
    "redux-thunk": "^2.4.1",
    "typescript": "^4.7.4",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@reduxjs/toolkit": "^1.8.3",
    "@types/react-redux": "^7.1.24",
    "@types/react-router-dom": "^5.3.3",
    "react-router-dom": "^6.3.0",
    "typescript-plugin-css-modules": "^3.4.0"
  }
}

已解决：和课程不一样的写法


 <Route path='/search' element={<SearchPage />}>
	   <Route path=':keywords' element={<SearchPage />}></Route>
 </Route>

针对搜索页面需这样写

写回答

4回答

LLCSL

2022-09-26

路由可选参数

React Router V4 可选参数：

<Route path="/search/(:keywords)" element={<SearchPage />} />

React Router V5 可选参数：

<Route path="/search/:keywords?" element={<SearchPage />} />

React Router V6 可选参数：

<Route path='/search/'>
  <Route path=':keywords' element={<SearchPage />}></Route>
  <Route path='' element={<SearchPage />}></Route>
</Route>

<Route path='/search/' element={<SearchPage />}>
  <Route path=':keywords' element={<SearchPage />}></Route>
</Route>

Tommy0714

2023-03-25

App.tsx

 <Route path="/search/">
     <Route path=":keywords" element={<SearchPage />}></Route>
     <Route path="" element={<SearchPage />}></Route>
 </Route>

SearchPage.tsx

  useEffect(() => {
    if (keywords) {
      dispatch(searchProduct({ nextPage: 1, pageSize: 10, keywords }));
    } else {
      dispatch(searchProduct({ nextPage: 1, pageSize: 10, keywords: "" }));
    }

    return () => {};
  }, [location]);

  const onPageChange = (nextPage, pageSize) => {
    if (keywords) {
      dispatch(searchProduct({ nextPage, pageSize, keywords }));
    } else {
      dispatch(searchProduct({ nextPage, pageSize, keywords: "" }));
    }
  };

Tommy0714

weixin_慕容8065859

没有作用, 我是快捷键生成的代码片段, 去不去掉都不影响结果

2023-06-27

共2条回复

weixin_慕用9360114

2023-02-13

你好！请问一下，我用的V6，按照以上写法改了，但是没有参数搜索时，一直转菊花。请问可能哪里有问题？

yhysir

我刚也遇到这个问题了，那是你写了if判断的原因，不写判断就行了。

2023-02-15

共1条回复

阿莱克斯刘

2022-07-15

是的，这是课程的疏忽，感谢你的解决方案。

Tommy0714

weixin_慕无忌6118694

上面改路由的路径是保证在keywords为空的情况下，也能渲染SearchPage组件，但是SearchPage组件中dispatch action的时候，还做了对keywords的if条件判断，在keywords为空的时候，不做任何处理，所以createAsyncThunk那里一直是pending状态，所以菊花一直转。上面改了之后，还要改useEffect和onPageChange加一个else判断，传入的keywords为空字符串

2023-03-25

共2条回复

React18 系统精讲结合TS打造旅游电商平台

React18 精讲 + 结合 TS 实战 + 热门业务开发，获取必备技能

1993 学习 · 1015 问题

查看课程

相似问题

如果实在axios的ts文件里，如何根据业务跳转到不同的路由

回答 1

路由不存在，关于重定向和404页面的问题

回答 1

react-router-v6如何在普通js中使用useNavigate进行路由跳转

回答 1

我搜索框空的话点击搜索就会跳转到404页面

回答 2

老师这两个参数如果要给一个类型的话，应该给一个什么类型

回答 1

打开慕课网App查看更多内容