英文:
React Routes is not working React Router dom
问题
路由不起作用，我是React的初学者。当我在浏览器中输入URL时，文本不显示。我尝试了以下方法。我在pages文件夹中创建了页面。
import Index from "./pages/Index";
import Login from "./pages/Login";
import Product from "./pages/Product";
import Register from "./pages/Register";
import { BrowserRouter, Route } from 'react-router-dom';
function App() {
return (
<div>
<BrowserRouter>
<Route path="/" component={Index} />
<Route path="/login" component={Login} />
<Route path="/product" component={Product} />
<Route path="/register" component={Register} />
</BrowserRouter>
</div>
);
}
export default App;
请确保您已正确导入所需的组件和库，并且已安装了react-router-dom库。如果问题仍然存在，请检查浏览器控制台是否有任何错误消息，并确保您的路由路径与实际页面组件的路径匹配。
英文:
Route is not working i am a beginner of react.when i type the urls on the browser text is not displaying.what i tried so far i attached the below. i created the pages inside pages folder.
import Index from "./pages/Index";
import Login from "./pages/Login";
import Product from "./pages/Product";
import Register from "./pages/Register";
import {BrowserRouter,Route} from 'react-router-dom';
function App() {
return (
<div>
<BrowserRouter>
<Route path = "/">
<Index/>
</Route>
<Route path = "/login">
<Login/>
</Route>
<Route path = "/product">
<Product/>
</Route>
<Route path = "/register">
<Register/>
</Route>
</BrowserRouter>
</div>
);
}
export default App;
答案1
得分: 2
你需要将所有的路由包裹在 Routes 组件内。这是 react-router-dom 的一部分。
import Index from "./pages/Index";
import Login from "./pages/Login";
import Product from "./pages/Product";
import Register from "./pages/Register";
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
return (
<div>
<BrowserRouter>
<Routes>
<Route path="/" element={<Index />} />
<Route path="/login" element={<Login />} />
<Route path="/product" element={<Product />} />
<Route path="/register" element={<Register />} />
</Routes>
</BrowserRouter>
</div>
)
}
export default App;
英文:
You need to wrap all your routes inside Routes component. It's part of the react-router-dom
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
import Index from "./pages/Index";
import Login from "./pages/Login";
import Product from "./pages/Product";
import Register from "./pages/Register";
import {BrowserRouter,Routes,Route} from 'react-router-dom';
function App() {
return (
<div>
<BrowserRouter>
<Routes>
<Route path = "/" element={<Index />} />
<Route path = "/login" element={<Login />} />
<Route path = "/product" element={<Product />} />
<Route path = "/register" element={<Register/>} />
</Routes>
</BrowserRouter>
</div>
)}
export default App;
<!-- end snippet -->
答案2
得分: 0
将所有路由包装在像这样的routes中：
function App() {
return (
<HashRouter>
<Routes>
<Route path="/" element={<Index />} />
<Route path="/login" element={<Login />} />
</Routes>
</HashRouter>
)
}
英文:
Wrap all route in routes like this
function App() {
return (
<HashRouter>
<Routes>
<Route path="/" element={<Index/>} />
<Route path="/login" element={<Login/>} />
</Routes>
</HashRouter>
)
}
答案3
得分: 0
每个路由都使用 element 属性在其 props 中显示你指定的元素。
尝试这样做：
import Index from "./pages/Index";
import Login from "./pages/Login";
import Product from "./pages/Product";
import Register from "./pages/Register";
import { BrowserRouter, Route } from 'react-router-dom';
function App() {
return (
<div>
<BrowserRouter>
<Route path='/'>
<Route index element={<Index />} />
<Route path="login" element={<Login />} />
<Route path="product" element={<Product />} />
<Route path="register" element={<Register />} />
</Route>
</BrowserRouter>
</div>
);
}
export default App;
额外信息：
这样做的效果是你在路径 / 上指定了一个主页路由，所有其他路由都是这个主页路由的子路由。
在第一个嵌套路由中的 index 属性用于告诉程序这是父级的首页页面。
英文:
Each Route shows the element you specify in its props using the element prop.
Try this:
import Index from "./pages/Index";
import Login from "./pages/Login";
import Product from "./pages/Product";
import Register from "./pages/Register";
import {BrowserRouter,Route} from 'react-router-dom';
function App() {
return (
<div>
<BrowserRouter>
<Route path='/'>
<Route index element={<Index/>} />
<Route path="login" element={<Login/>} />
<Route path="product" element={<Product/>} />
<Route path="register" element={<Register/>} />
</Route>
</BrowserRouter>
</div>
);
}
export default App;
Extra context:
What this does is that you specify a home route at the path / and all other routes are children of this home route.
The index property in the first nested route is used to tell the program this is the index page of the parent.
答案4
得分: 0
你需要在Routes标签中传递element属性，指定路径应该导向的元素。你可以在这里找到文档。
这应该可以工作：
<Route index element={<Index/>}/>
<Route path="login" element={<Login/>}/>
<Route path="product" element={<Product/>}/>
<Route path="register" element={<Register/>}/>
英文:
You would need to pass the element prop where the path should direct to in the Routes tag. You can find documentation here.
This should work:
<Route index element={<Index/>}/>
<Route path="login" element={<Login/>}/>
<Route path="product" element={<Product/>}/>
<Route path="register" element={<Register/>}/>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论