Develop Reference

Cant use page routing

So I'm working an a project where the user should click the link and than should go on the login or create account page. I'm using routing for that but as soon as I put Routes to use route and add the navigation link there my webpage turns blank:
That was the code and this is the page at the moment:
No error shown no nothing! help pls!
First I used Switch than the webpage didn't allow me to use it, so I changed to Routes

Instead of
<Routes>
<Route path="login" exact>
<Login />
</Route>
<Route path="create" exact>
<Signup />
</Route>
</Routes>
It should be like
<Routes>
<Route exact path="login" element={<Login />} />
<Route path="/create" element={<Signup />} />
</Routes>
Here is a link to code sandbox
Here is how to render pages without navbar

So i wrote it wrong instead it should be written like this:
<Routes>
<Route exact path="login" element={<Login />} />
<Route path="/create" element={<Signup />} />
</Routes>
But everything else that is outside the Routes will be render in the other page too, this is very useful for navbar!

Different Nav based on route react router

Hello all I did use search but I couldnt find anything that solved this problem.
I need two navbars one for most pages and one for a specific set of routes
code
<BrowserRouter>
<Header />
<Switch>
<Route exact path="/" component={() => <div>home</div>} />
<Route exact path="/services" component={() => <div>services</div>} />
</Switch>
</BrowserRouter>
I need something that would say render all routes except /services/* because /services/* has different
I thought about changing things inside Header but there will be too many changes it would be easier to have different component.

You could set up a condition inside your path. I haven't tested this, but something in that nature could help you combine and separate certain routes.
<BrowserRouter>
<Header />
<Switch>
<Route exact path={"/allComponents" || "/"} component={() => <div>home</div>} />
<Route exact path="/services" component={() => <div>services</div>} />
</Switch>
</BrowserRouter>

React Router v4 Nested Routes with Switch

Trying to do the following, but it's not working.
ReactDOM.render(
<Router>
<div className="route-wrapper">
<Switch>
<App>
<Route exact path="/" component={HomePage} />
<Route path="/user" component={UserPage} />
</App>
<Route component={Err404} />
</Switch>
</div>
</Router>,
document.getElementById('main')
)
As the documentation says only Route and Redirect elements are allowed inside a Switch element. How do I get this to work without explicitly wrapping HomePage and UserPage in App or having the error page wrapped by App?

While I have begun developing a "Universal React app", where the first page load is done with server-side rendering, I faced similar problem as the React-Router had just updated to 4.0. You should consider restructuring you application something as given below:
ReactDOM.render(
<Router>
<div className="route-wrapper">
<Switch>
<Route path="/" component={App} />
<Route component={Err404} />
</Switch>
</div>
</Router>,
document.getElementById('main')
)
Where the App component is refactored as following:
class App extends React.Component {
render() {
return <div>
<Switch>
<Route exact path="/" component={HomePage} />
<Route exact path="/user" component={UserPage} />
</Switch>
</div>;
}
}

react-router - sub-routes not showing

Im trying to implement react-router and something is missing. I cannot browse to
domain.com/projects/-KBnGTGY0WZQSZIa7nRc
Which i expect to be a sub-domain of projects with a projectId
This is my routes setup
<Router history={new HashHistory}>
<Route path="/" component={Main}>
<Route path="profile" component={Profile} onEnter={requireAuth} />
<Route path="projects" component={Projects} >
<Route path="/projects/:projectId" component={ProjectsDetails} />
</Route >
<Route path="login" component={Login} />
<Route path="logout" component={Logout} />
<Route path="register" component={Register} />
<Route path="*" component={Register}/>
</Route>
</Router>
I also Link to the sub-route like this
<Link to={`/projects/${this.props.item.key}`}>
<h3 className="project-list-h3">{this.state.text} </h3>
</Link>
Its simply reverting to the * which is the registration page.
Is there something i need to add to the {ProjectsDetails} page? It dosnt even call it so i believe the problem is somewhere else.
Thanks

In the example you have provided above your route would be /projects/projects/:id. If you wish to a route like path="/projects/:projectId" you would not nest it inside the project route. I have included a link to the offical doc that gives an overview of this concept. Official docs routes.
If you have a look at the example it shows a similar nested route to yours, note that you combine the path of the parent and child to get the path of the child route.
<Router>
<Route path="/" component={App}>
<Route path="about" component={About} />
<Route path="inbox" component={Inbox}>
<Route path="messages/:id" component={Message} />
</Route>
</Route>
/inbox/messages/:id App -> Inbox -> Message

How to move between nested components with React Router

I have been working along just fine with react router until I had to try and nest components and get my nav bar to show the path. For example I want to go from my matches page to a portfolio page, then I want the url to reflect this(....../#/matches/portfolio).
To me the docs seem to explain how to do this however I can only get the url to change and not the page content. No error is show just noting happens to the view.
Here is my router containing nested routes:
ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={App}>
<Route path="login" component={Login} />
<Route path="home" component={Home} />
<Route path="matches" component={Matches}>
<Route path="portfolio" component={Portfolio}>
<Route path="search" component={Search} />
</Route>
</Route>
<Route path="create" component={Create} />
<Route path="join" component={Join}/>
</Route>
</Router>
, document.getElementById('app'));
And if I am on the matches page and want to link to a portfolio I have a button with:
<Link to="matches/portfolio">To Portfolio</Link>
(Ideally I would like to have it have a portfolioId attached to the url but I am trying to keep it simple at the moment)
The repo can be found here:
https://github.com/muddybarefeet/pirateStocks and then main router is in server/client/src/app.jsx and all components in server/client/src/components.
To see the project run nodemon server.js and webpack

The following is how I got my routes to work. This is not what the docs say but it works!
ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={App}>
<Route path="/login" component={Login} />
<Route path="/home" component={Home} />
<Route path="/join" component={Join}/>
<Route path="/matches" component={Matches} />
<Route path="/matches/portfolio" component={Portfolio} />
<Route path="/matches/portfolio/search" component={Search} />
<Route path="create" component={Create} />
</Route>
</Router>
, document.getElementById('app'));
And then route with the following:
<Link to="/matches/portfolio">To Portfolio</Link>