如何在create-react-app上使用'/'阻止路由

Question

I'm creating a simply SPA with four pages and I found one big issue that crashes my app. I have four routes:

<Switch>
     <Route exact path='/przewodnictwo' component={Conductivity} />
     <Route exact path='/apartamenty' component={Apartments} />
     <Route exact path='/przewoz_osob' component={Transport} />
     <Route exact path='/narciarstwo' component={Skiing} />
     <Redirect from='*' to='/przewodnictwo' />
</Switch>

Everything works perfekt and my NavLinks looks like this:

<NavLink exact to='/apartamenty'>
       Apartamenty
</NavLink>

All my images are loaded from public folder. Any other routes like /example , /przewodnictwo/23 are redirecting me to main page which is /przewodnictwo . But strange things are happening when I write in url /przewodnictwo/ or /apartamenty/ these are not blocked and my images are being loaded from not public folder but from /public/apartamenty/3.jpg which dosen't exists.

EDIT

I forgot to add '/' to paths images and now works perfect. src='1.jpg' has been changed to src='/1.jpg' Thank you for help.

But how to block '/przewodnictwo/' route ?? I really don't like this url, it's ugly

Answer 1

You need to use strict keyword to avoid trailing slash. According to react-router documentation for strict

When true , a path that has a trailing slash will only match a location.pathname with a trailing slash. This has no effect when there are additional URL segments in the location.pathname .

<Switch>
     <Route exact strict path='/przewodnictwo' component={Conductivity} />
     <Route exact strict path='/apartamenty' component={Apartments} />
     <Route exact strict path='/przewoz_osob' component={Transport} />
     <Route exact strict path='/narciarstwo' component={Skiing} />
     <Redirect from='*' to='/przewodnictwo' />
</Switch>

Answer 2

To block the trailing slashes from matching your routes, you can use the strict prop on the Route component.

Source: https://reacttraining.com/react-router/web/api/Route/strict-bool

<Route>

strict: bool

When true, a path that has a trailing slash will only match a location.pathname with a trailing slash. This has no effect when there are additional URL segments in the location.pathname.