React Router App.js作为导航和启动/欢迎/登陆屏幕

Question

我最近刚刚学习了React Router v6教程。我将代码实现到我的项目中(现场演示，GitHub)，但发现了一些有趣的东西。App.js现在作为一个"主页"。这说明不了什么。看来App.js的主要功能是导航条。

是否可以设置App.js以包含如下消息:

Welcome to my application! Use the navigation above.

但是当其中一个导航栏链接被按下时，这个消息就消失了?目前，当按下其中一个导航链接时，消息将出现在其他内容上方。App.js这样做是有意义的，因为它是其他链接的父链接。最简单的方法是将导航变成一个组件，并将所有的路径放在同一层，但是教程的结构很好。

以下是与React Router相关的主要文件:

index.js:

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<Provider store={store}>
<BrowserRouter basename="/raston-router">
<Routes>
<Route path="/" element={<App />}>
<Route path="output" element={<Output />} />
<Route path="input" element={<Input />} />
</Route>
</Routes>
</BrowserRouter>
</Provider>
</React.StrictMode>
);

App.js:

export default function App() {
return (
<div>
<h1>Raston Router and Redux</h1>
<nav style={{ borderBottom: "solid 1px", paddingBottom: "1rem" }}>
<Link to="/input" style={{ padding: "10px" }}>
Input
</Link>
<Link to="/output" style={{ padding: "10px" }}>
Output
</Link>
</nav>
// welcome message would go here
<Outlet />
</div>
);
}

感谢您的阅读!

Answer 1

我自己用这个StackOverflow帖子找到了一个答案:https://stackoverflow.com/a/72267552/17386696

我使用index创建了一个到新组件的路由，如下所示:https://reactrouter.com/docs/en/v6/getting-started/concepts#defining-routes

<Route index element={<LandingPage />} />