反应：通过道具不起作用。我想念什么吗？

发布于 2025-02-12 06:29:09 字数 743 浏览 0 评论 0原文

正如您从标题中获得的那样，React中的通过道具不起作用。我不明白。

import styled from 'styled-components';


const Login = (props) => {
    return<div>Login</div>

}

export default Login;

在我的app.js页面上，这里有以下内容：

import './App.css';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Login from './components/Login.js';

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route exact path="/" >
            <Login />
          </Route>
        </Routes>
      </Router>
    </div>
  );
}

export default App;

问题：如果我启动脚本并渲染页面，则不会显示任何内容。我在做什么错？

原文

as you may get from the title, passing props in react is not working. And i don´t get why.

import styled from 'styled-components';


const Login = (props) => {
    return<div>Login</div>

}

export default Login;

On my App.js page here is the following:

import './App.css';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Login from './components/Login.js';

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route exact path="/" >
            <Login />
          </Route>
        </Routes>
      </Router>
    </div>
  );
}

export default App;

Problem: if i start the script and render the page, nothing is shown. What am I doing wrong?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

幽蝶幻影 2025-02-19 06:29:11

您应该将＆lt; login /＆gt; < /code>作为元素传递。尝试此代码： app.js：

import './App.css';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Login from './components/Login.js';

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route exact path="/" element={<Login />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

You should pass <Login /> as the element. Try this code:
App.js:

import './App.css';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Login from './components/Login.js';

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route exact path="/" element={<Login />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

回复收藏 0 原文

旧情勿念 2025-02-19 06:29:11

＆lt; login/＆gt; ... 登录组件未传递任何道具，因此我不希望在组件中看到任何道具。您的问题是误解路由组件的工作方式。 路由组件的唯一有效的孩子是另一个路由在筑巢路由的情况下，否则，route> Route将路由内容传递给路由内容。组件的元素 prop作为React node，又称JSX。

route

 声明功能路由（
  道具：路由
）：React.Reactelement |无效的;

接口RouteProps {
  病例敏感？
  儿童？：react.reeactnode;
  元素？：react.reeactnode |无效的;
  索引？：布尔人；
  路径？：string;
}

登录组件应传递给元素 prop。

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route path="/" element={<Login />} />
        </Routes>
      </Router>
    </div>
  );
}

有关更多详细信息/说明，请参见为什么＆lt; route＆gt;有一个元素 prop而不是渲染或component？

<Login />... the Login component isn't passed any props so I wouldn't expect to see any in the component. Your issue is a misunderstanding how the Route component works. The only valid children of the Route component is another Route component in the case of nesting routes, otherwise, the routed content is passed on the Route component's element prop as a ReactNode, a.k.a. JSX.

Route

declare function Route(
  props: RouteProps
): React.ReactElement | null;

interface RouteProps {
  caseSensitive?: boolean;
  children?: React.ReactNode;
  element?: React.ReactNode | null;
  index?: boolean;
  path?: string;
}

The Login component should be passed to the element prop.

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route path="/" element={<Login />} />
        </Routes>
      </Router>
    </div>
  );
}

For more details/explanation see Why does <Route> have an element prop instead of render or component?

回复收藏 0 原文

~没有更多了~