willybrauner / react-router Goto Github PK

View Code? Open in Web Editor NEW

2.0 2.0 0.0 2.07 MB

🚃 react router

License: MIT License

TypeScript 98.94% CSS 0.46% HTML 0.60%

hooks hooks-api-react react reactjs route router stack transition

react-router's People

Contributors

Stargazers

Watchers

react-router's Issues

subRouter > back to this router root

if url is /foo/bar and we need to go back to /foo, we want to animated playOut sub-stack

GlobalRouter > init middleware

Create multi stack

Move Router component logic in Stack component

Because wrapped Link components didn't refer to their closest Router instance anymore, we can move logic to the .

So we don't need wrapper component anymore.

Set custom base doesn't work

Create fakeMode

Rename "fakeMode" to "historyMode"

Add fake mode

Stack - create AllowSamePageTransition ?

Link - change props "href" to "to"

replace "href" by "to"
"to" should take string or { name: string , param: {[x:string]: any }}

create useRoute hook

 const { match, params, currentRoute, previousRoute } = useRoute();

bug on arrow navigation

setLocation for GlobalRouter

setLocation() allow to updateRoute() from current Router instance. If we are in sub-router, we need to trigg route from first router level

ex:

currentRoute is /foo/bar
need to go to /yo from a setLocation("/yo") from BarPage.tsx

Problem is setLocation depend of current router instance and we need to set new location (Router.updateRoute()) from another router instance...

create setLocation hook

const [location, setLocation] = useLocation();

add active link class

register transitions in Router class

add middleware

LanguageService

Test with aliasing Preact

Add is first page

Fix sub-router base "/base/" to "/base"

Create subRouter component

this is a simple wrapper of <Router> component

ex:

react-router/src/pages/AboutPage.tsx

Lines 52 to 73 in 03e9849

 const AboutPageNestedRouter = (props) => { 

 const router = useRouter(); 

 const [parentLocation, setParentLocation] = useLocation(); 

 const nestedBase = `${router.base}${props.base}`.replace("//", "/"); 

 debug("nestedBase", nestedBase); 

 //debug("parentLocation", parentLocation); 

 const routes = routesList.find(el => el.path === "/about").children; 

 return ( 

 <Router 

 base={nestedBase} 

 key={nestedBase} 

 subRouter={true} 

 routes={routes} 

 id={2} 

 > 

 {props.children} 

 </Router> 

 ); 

 };

Write tests

route not found handler

Create useStackIsAnimating() ?

Need to get stack information.
usStack is already used for register page.

ex:

const isAnimating:boolean = useStackIsAnimating()

Refresh root component if /about/foo -> /about

Link - active state doesn't work on sub-route

Create openRoute and buildUrl methods

handle routeCounter / isFirstRoute via hook

GlobalRouter.ts store route counter, we need to dispatch this variable and handle it in hook.

	const AboutPageNestedRouter = (props) => {
	const router = useRouter();
	const [parentLocation, setParentLocation] = useLocation();

	const nestedBase = `${router.base}${props.base}`.replace("//", "/");
	debug("nestedBase", nestedBase);
	//debug("parentLocation", parentLocation);

	const routes = routesList.find(el => el.path === "/about").children;

	return (
	<Router
	base={nestedBase}
	key={nestedBase}
	subRouter={true}
	routes={routes}
	id={2}
	>
	{props.children}
	</Router>
	);
	};

willybrauner / react-router Goto Github PK

react-router's People

Contributors

Stargazers

Watchers

react-router's Issues

Recommend Projects

Recommend Topics

Recommend Org