标签: react-router-dom

我越来越

pathname.match 不是函数

当我使用matchPath时出错react-router。

这是抛出异常的代码：

import { matchPath, useLocation } from "react-router";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

const MatcherControl = () => {
  const location = useLocation();
  const match = matchPath(location.pathname, {
    path: "/users/:id",
    exact: true,
    strict: false
  });
  return <div>{match ? "matches" : "not matches"}</div>;
};

这是重现错误的最小示例沙箱。

我有一个问题，我是新手，我正在尝试使用 React Router，但每当我使用它时它都会显示一个空白页面这是我的代码：

    import React, {Component} from 'react';
import {BrowserRouter as Router, Route} from 'react-router-dom';
class TodoApp extends Component{
    render() {
      return (
        <div className="TodoApp">
            <Router>
                <>
                <Route path="/" element={<WelcomeComponent />} />
                </>
            </Router>
        </div>
      )
    } 
}


class WelcomeComponent extends Component{
    render()
    {
        return <div>
            abcd
        </div>
    }
}

如果我删除路线，而是编写其他内容，则代码可以正常工作，所以我知道路线有问题，但我不确定它是什么

function App() {
  return (
    <Router >
      <NavBar/>
        <Routes>
          <Route path="/" element={<HomePage />}/>
          <Route exact path="/about-us" element={<About />} />
          <Route exact path="/admin" element = {<Admin/>}/>
        </Routes>
      <Footer/>
    </Router>
  );
}

export default App;

如何在反应中将主页的页眉和页脚与管理页面中的显示分开？

我将一个页面路由到根目录，但无论我使用什么 js 文件，它都显示为空白页面。不知道出了什么问题，从去年开始就没有使用过 React，但看起来他们已经更新了 React-router-dom，所以它不再使用 Switch。有人知道正确的语法以便页面显示吗？以下是文件：

WebRoutes.js

import React from "react";
import { Routes, Route } from 'react-router-dom';
import { useNavigate } from "react-router-dom";

// Webpages
import App from './App';
import Welcome from './welcome';
import SignUp from './Signup'

export default function WebRoutes() {
  return (
    <Routes>
      <Route path='/'>
       <Welcome />
      </Route>
    </Routes>
  );
}

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import WebRoutes from './WebRoutes';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <WebRoutes />
  </React.StrictMode>,
  document.getElementById('root')
);

尝试用 NavLink 和 React-router 替换一些旧方法，但我的代码似乎不起作用

   return (
      <div className='Selection-container'>
      <div className="Selections">
      <NavLink to="/best">
       <button  className='Best' value='best' onClick={handleSelection}>Best</button>
       </NavLink>
      <NavLink to="/hot" >
       <button  className='Hot' value='top' onClick={handleSelection}>Hot</button>
       </NavLink>
      <NavLink to="/new" >
       <button   className='New' value='new' onClick={handleSelection}>New</button>
       </NavLink>
      </div>
        {loading && <div className='Loading-main' ><img src={loadingImg} alt='loading' className='Main-loading' /></div>}
     
      <Routes>
        <Route path='/best' element={<PostMain />} />
        <Route path='/hot' element={<PostMain />} />
        <Route path='/new'  element={<PostMain />}/>
      </Routes>
      </div>
  );
}

我正在尝试在按钮内呈现不同类型的帖子，它们似乎可以工作，它们会更改页面中的内容，更改浏览器中的路线，只是当我在最热门或新页面上时，“活动”按钮不活动（最后我想在 css 中显示活动：非活动图像作为背景，但现在我会选择显示当前活动页面的任何内容）。