我试图弄清楚React的基本原理,但我找不到任何解释。当我尝试使用路径时,应用程序的行为就好像路径总是“/":除了path="/"之外,没有路由匹配,控制台给我警告'No routes matched location“/”'。
index.js
import React from 'react';
import {createRoot} from 'react-dom/client';
import {NativeRouter} from 'react-router-native';
import './index.css';
import App from './App';
const root = createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<NativeRouter>
<App />
</NativeRouter>
</React.StrictMode>
);
App.js
import {Routes, Route} from 'react-router-native';
function App() {
return (
<Routes>
<Route path="/about" element={<About/>} />
</Routes>
)
}
function Home() {
return (<div style={{ padding: 20 }}>
<h2>Home View</h2>
<p>Lorem ipsum dolor sit amet, consectetur adip.</p>
</div>
);
}
function About() {
return (
<div style={{ padding: 20 }}>
<h2>About View</h2>
<p>ABOOOOUT.</p>
</div>
);
}
export default App;
我试着用npm start
运行这个程序,并期望localhost:3000显示一个空白页面,localhost:3000/about显示一个显示“About View”的页面,我从教程中复制了大部分代码,似乎建议它应该做到这一点。
编辑:为了澄清,无论我尝试什么路径,页面总是空白的。路径“/about”没有按预期工作。
1条答案
按热度按时间yks3o0rb1#
如果您尝试在Web浏览器中使用
NativeRouter
,则需要手动指定初始路由路径,以匹配并处理通过链接在应用程序中导航。"/"
是默认的初始路由。NativeRouter
不像BrowserRouter
那样耦合到地址栏中浏览器的URL。这与MemoryRouter
的工作方式类似。参见NativeRouter。
示例:
x一个一个一个一个x一个一个二个x
第一节第一节第一节第二节第一节