标签: react-router-dom

我将加载器与 new 一起使用，当我在组件中react-router-dom使用钩子时，响应类型未知，因此我无法使用它。useLoaderData我不想使用as类型定义，因为我觉得这是一种作弊，但如果这是唯一的方法，那么，请告诉我：

我的加载器功能：

{
      path: "/reset-password/:resetToken",
      element: <ResetPassword />,
      loader: async ({ params }) => {
        if (!params.resetToken){
          return null
        }
        const fakeTokens = ["abcdef123456", "bingbong", "foobar"]

        // make API call to check if the given token is valid
        const fakeAPICall = (resetToken: string) : Promise<object> => {
          if (fakeTokens.includes(resetToken)){
            return new Promise(resolve => resolve({ success: true }))
          }

          return new Promise(resolve => resolve({ success: false }))
        }
        
        const resp = await fakeAPICall(params.resetToken); …

I'm trying to use react-router-dom v6.4+ in my project. I implemented it as a route array of objects. Its worked as routing but suddenly I got another issue realated this. I can't call any hook inside the Component which located on element property in route array.
In the route.ts file:

import MainLayout from './container/layouts/mainLayout/MainLayout'
import ErrorPage from './view/Error'
import Home from './view/Home'

const routes: RouteObject[] = [
  {
    path: '/',
    element: MainLayout(),
    children: [
      {
        index: true,
        element: Home(),
      }, …

当我单击任何路线时，页面不会呈现并引发错误 - TypeError: n is not a function located in the react-dom.Production.min.js 文件。我正在使用 React-Router V6。

应用程序.js

function App() {
return (
    <BrowserRouter>
        <div className="Orchard Inbound Orders">
            <Navbar />
            <div className="container">
                <Routes>
                    <Route exact path="/" element={<UploadOrdersPageHome />} />
                    <Route exact path="/admin-users" element={<AdminPageUsersTab />} />
                    <Route exact path="/admin-clients" element={<AdminPageClientsTab />} />
                    <Route exact path="/create-client" element={<CreateClientPage />} />
                    <Route exact path="/edit-client/:rowkey" element={<EditClientPage />} />
                </Routes>
            </div>
        </div>
    </BrowserRouter>
);

导航栏.js

const Navbar = () => {
return (
    <div>
        <nav className="navbar mx-auto text-center …

我一直在观察人们使用 useLoaderData() 来提取传递给反应组件的值

这是我在 App.js 中的代码，

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path='/' element={<RootLayout/>}>
      
      <Route path='user' loader={userLoader} element={<User/>}></Route>
      
    </Route>
  )
)

在元素中，

import { useLoaderData, Link } from "react-router-dom";

const User = () => {

    const users = useLoaderData();

    return (
        <div >
        </div>
    );


}

//loader function
export const userLoader = async () => {

    const res = await fetch('http://localhost:8000/user');
    return res.json();
}

export default User;

我的问题是，是否可以从多个 URL 获取并返回一次到浏览器并使用 useLoaderData() 提取？

看起来像这样

export const userLoader = async () => …

我安装了react-router-dom4.1.1并在尝试渲染我的组件时继续收到以下错误:

未捕获错误:React.Children.only预计会收到一个React元素子级.

这是我的app.js档案:

import React from 'react';
import {BrowserRouter as Router, Route} from 'react-router-dom';
import Nav from './components/Nav/nav';
import Search from './components/Search/search';
import Favorites from './components/Favorites/favorites';

const App = () => (
 <Router>
    <div className="app">
      <Nav />
      <Route exact path="/" component={Search}/>
      <Route path="/favorites" component={Favorites}/>
    </div>
  </Router>
);

export default App;

这是nav.jsx:

import React from 'react';
import {BrowserRouter as NavLink} from 'react-router-dom';

const Nav = () => (
    <ul className="nav">
        <li><NavLink exact to="/" …

如果我尝试安装它，似乎我对react-router-dom软件包有一些问题，我收到此警告（请参见屏幕截图）：

npm WARN react-router-dom@4.0.0需要对等体react @ ^ 15，但没有安装。
您必须自己安装对等依赖项。
npm WARN react-router@4.2.0要求对等体react @> = 15，但未安装。
您必须自己安装对等依赖项。

我也尝试更新所有软件包，但结果不佳。

有什么建议吗？

我正在使用最新的React和React Router版本构建一个Web应用程序，在我的情况下，我的应用程序支持多种语言，并且由于建立了索引，因此每种语言都有单独的html文件。因此，对于像myapp.com这样的网址，

myapp.com/en/-英文

myapp.com/de/-适用于德语等...

在服务器端，每个/ en /文件夹当然都有自己的index.html文件，其中包含以给定语言编写的meta，title和其他元数据，并且它们都可以进入我们的React应用程序（bundle.js）

我以前已经使用Router Hash History构建了类似的东西，所以我的应用程序看起来像myapp.com/en/#/home，而我在route.js中的主要路由当然是这样的

<Route path="/" component={MainComponent}

现在，我要使用BrowserRouter，并且如果URL为myapp.com/en/ ，则我的路由应如下所示：

<Link to="/home" />

单击后，将带您到myapp.com/en/home，它将正确呈现在Route中与其链接的组件

 <Route path="/home" exact component={HomeContainer} />

基本上目前这只有在我做了这样的事情时才有效

<Link to=`/${getCurrentLanguage()}/home` /

路线是这样的

<Route path=`/${getCurrentLanguage()}/home` exact component={HomeContainer} />

这当然是最疯狂的

我如何才能达到预期的行为？或者您有其他不同的想法吗？谢谢

编辑我没有问任何关于React翻译的问题，我将使用i18next来翻译React方面，我问的是使用不同index.html文件进行路由的问题

在导航到其他路线之前，是否可以对组件应用逻辑？

例如，我的组件看起来像这样：

  class Example extends React.Component {

    //Handles logic for when user leaves page
    handlePageExit = () => {
        console.log("Leaving page...");
    }

    //Set onBeforeUnload event listener so handlePageExit function is called when user closes or refreshes page
    componentDidMount = () => {
        window.addEventListener("onbeforeunload", this.handlePageExit);
    }

    //This hook is called when page exits or is refreshed 
    //It will remove event listener when 
    //However, it wont be called when user changes to a new route
    componentWillMount = () => {
        window.removeEventListener("onbeforeunload", this.handlePageExit) …

在我的React App中，我有3个组件。从第一个组件的按钮开始，我使用链接转到第二个组件。在第二处，我创建了一个状态（redux存储），对其进行了操作，并在完成操作后通过提交按钮将我重定向到第三处。在第三个组件上，我还看到了状态（通过redux chrome工具），但是在这里，当我刷新页面（更改并保存代码时的webpack事情）时，我失去了状态并得到了一个空的Object。

这是我的应用程序的结构。

index.js

const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(thunk))
);

ReactDOM.render(
  <BrowserRouter>
    <Provider store={store}>
      <Route component={App} />
    </Provider>
  </BrowserRouter>,
  document.getElementById("root")
);

App.js

const App = ({ location }) => (
  <Container>
    <Route location={location} path="/" exact component={HomePage} />
    <Route location={location} path="/GameInit" exact component={GameInit} />
    <Route location={location} path="/Battle" exact component={Battle} />
  </Container>
);

App.propTypes = {
  location: PropTypes.shape({
    pathname: PropTypes.string.isRequired
  }).isRequired
};

export default App;

在主页上，我有一个链接到GameInit的按钮

const HomePage = () => (<Button color="blue" as={Link} to="/GameInit">START GAME</Button>);
export default HomePage;

和GameInit页面看起来像 …

您好，我希望它InstrumentPage在#/访问时以无道具的形式呈现，但在#/ipb访问通过时ipb作为props实体。但这不起作用。

  render() {
    return (<React.Fragment>
      <HashRouter>
        <Switch>
          <Route path='/' render={(props) => <InstrumentPage {...props} />}/>
          {Object.keys(AppConfig).forEach((property) =>
            <Route path={property} render={(props) => <InstrumentPage {...props} entity={property} />} />)
          }
        </Switch>
      </HashRouter>
    </React.Fragment>);
  }

AppConfig

const AppConfig = {
  pb: {
    header: 'PBHeader',
    body: 'PBBody',
  },
  ipb: {
    header: 'IPBHeader',
    body: 'IPBBody',
  },
};    
export default AppConfig;