0
165
Viewsreact-router-dom not working when change path
I am trying to render component Home and About using react-router but I get nothing. I think the problem in the index file with the store. How I can fix it?
Here is a running codesandbox.
index.js
import React from "react";
import reactDom from "react-dom/client";
import App from "./App";
import Store from "./Store";
const root = reactDom.createRoot(document.getElementById("root"));
root.render(
<Store>
<App />
</Store>
);
Store
import React, {createContext, useState} from 'react'
import Layout from './Layout'
export const Data = createContext()
function Store({ children }) {
const [state, setState] = useState(true)
const value = {state, setState}
return (
<Data.Provider value={value}>
<Layout>{children}</Layout>
</Data.Provider>
)
}
export default Store
Layout
import React, { useContext } from "react";
import { Data } from "./Store";
import {
BrowserRouter as Router,
Route,
NavLink,
Routes,
Link,
} from "react-router-dom";
function Layout({ children }) {
const { state } = useContext(Data);
return (
<div className="layout">
<Router>
<div>
<Link to="/">Home</Link>
<Link to="/about">About</Link> </div>
<div className={`${state ? "hide" : "show"} mobil `}>
<div className="children">{children} </div>
</div>
</Router>
</div>
);
}
export default Layout;
App
import React from "react";
import Layout from "./Layout";
import Home from "./Home";
import About from "./About";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
function App() {
return (
<Layout>
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/About" element={<About />} />
</Routes>
</Layout>
);
}
export default App;
3 answers
Answer question0
I just happen to see your Layout.js file.
function Layout({ children }) {
return (
<div>
<!-- Router -->
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<div>{children}</div>
<!-- /Router -->
</div>
);
}
You can't use <Router> because the Layout is being recursively used and implicitly you're nesting the <Router> element. It's better to use the element only once in your App before it loads.
0
The store component should receive the children props and pass it down to the Layout, ex:
function Store({children}) {
const [state, setState] = useState(true)
const value = {state, setState}
return (
<Data.Provider value={value}>
<Layout>{children}</Layout>
</Data.Provider>
)
}
0
Issue
The code you have shared is rendering a Layout component within another Layout component. The Layout component is rendering a Router. It is an invariant violation to render a router within another router.
function Layout({ children }) {
const { state } = useContext(Data);
return (
<div className="layout">
<Router> // <-- nested router!!
<div>
<Link to="/">Home</Link>
<Link to="/about">About</Link>{" "}
</div>
<div className={`${state ? "hide" : "show"} mobil `}>
<div className="children">{children} </div>
</div>
</Router>
</div>
);
}
Both the Store and App components are rendering a Layout component and Store is directly rendering App.
Solution
Remove one or the other Layout component from either Store or App. I suggest removing it from Store so Store is only providing the context value and not mixing in other UI layout and routing context concerns. Store should render the Provider and children prop.
Example:
function Store({ children }) {
const [state, setState] = useState(true);
const value = { state, setState };
return (
<Data.Provider value={value}>
{children}
</Data.Provider>
);
}
