We Keep Coding

React Router <Link> changes URL but does not automatically render component [duplicate]

This question already has answers here:
Link tag inside BrowserRouter changes only the URL, but doesn't render the component
(2 answers)
Closed 7 months ago.
I'm attempting to use React Router to allow a button in my NavBar to change the view when a button is clicked. Specifically, I want an "Upload" button to change the URL to /upload and render the UploadPage component.
Currently, the URL will change, but the view does not automatically render, and the 'old' component is still visible. I need to manually reload the page or go to the URL directly for the view to load. How can I stop this behaviour so that it automatically renders without manual reload?
App.js:
import { Component } from "react";
import Home from "../src/components/Component/Home/Home";
import Header from "./components/Component/Header/Header";
import UploadPage from "./components/Component/VideoUpload/VideoUpload";
import { BrowserRouter, Switch, Route } from "react-router-dom";
class App extends Component {
render() {
return (
<BrowserRouter>
<Header />
<Switch>
<Route path="/" exact component={Home} />
<Route
path="/video/:videoId"
component={Home}
render={(routerProps) => <Home {...routerProps} />
/>
<Route path="/upload" component={UploadPage} />
</Switch>
</BrowserRouter>
);
}
}
export default App;
Header.js
(This is a snippet of just the button in the NavBar)
import { Link } from "react-router-dom";
const Header = () => {
return (
//NavBar code here...
<Link to="/upload">
<button>
<img draggable="false" src={uploadIcon} alt="upload-icon" />
UPLOAD
</button>
</Link>
);
};
VideoUpload.js
import React from "react";
const VideoUpload = () => {
return (
<section className="uploadContainer">
<section className="uploadContainer__titleContainer">
<h2 className="uploadContainer__title">Upload Video</h2>
</section>
</section>
);
};
export default VideoUpload;

After a lot of trial and error and research, I found that in my index.js:
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
Should be changed to:
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
From my tests, <BroswerRouter> isn't necessary here and <App /> doesn't need to be wrapped for it to work, but, I'm keeping it wrapped just in case.
This fixes the issues I was experiencing.

React Router v4 - Nesting Routes Issue

I have the following App component.
class App extends React.Component {
constructor() {
super();
this.state = {}
}
// various methods that interact with state defined here
render() {
const Main = () => (
<div className="main-wrapper">
<ListPicker/>
<ListPane/>
</div>
);
const Search = () => (
<div className="search-wrapper">
<ul className="search-results">
<li>Search Results</li>
</ul>
</div>
);
return (
<div className="app-wrapper">
<Title/>
<SearchBar listResults={this.listResults}/>
<Route exact path="/" component={Main}/>
<Route path="/search" component={Search}/>
</div>
)
}
}
Which is rendered in index.js:
import React from 'react';
import { render } from 'react-dom';
import {
BrowserRouter as Router,
Route
} from 'react-router-dom';
import App from './components/App';
const Root = () => {
return (
<Router>
<div>
<Route exact path="/" component={App}/>
</div>
</Router>
)
};
render(<Root/>, document.getElementById('root'));
Towards the bottom of App you can see I'm trying to have either the Main component or Search component render below <Title/> and <SearchBar/> based on the paths / or /search. As far as I can tell from the React-Router docs, I'm doing what's shown in their example app, but I can't get this to work correctly. With this current setup Main renders fine at / but when navigating to /search nothing renders inside of <Root/>. I also tried wrapping those two <Routes/> in a <Switch/> but got the same result. Am I missing something?

You put a exact Route in you index.js. So the route /search can't find a way. So change to:
const Root = () => {
return (
<Router>
<div>
<Route path="/" component={App}/>
</div>
</Router>
)
};

React router history is string?

I'm trying to get started with react router in the browser using hash history, I copied this code from the guide for version 3.
import React from "react";
import ReactDOM from "react-dom";
import { Router, Route, Link, hashHistory } from 'react-router';
const App = React.createClass({
render() {
return (
<div>
<h1>App</h1>
<ul>
<li><Link to="/about">About</Link></li>
<li><Link to="/inbox">Inbox</Link></li>
</ul>
{this.props.children}
</div>
)
}
})
const About = React.createClass({
render() {
return <h3>About</h3>
}
})
const Inbox = React.createClass({
render() {
return (
<div>
<h2>Inbox</h2>
{this.props.children || "Welcome to your Inbox"}
</div>
)
}
})
const Message = React.createClass({
render() {
return <h3>Message {this.props.params.id}</h3>
}
})
var history = hashHistory;
console.log(history);
ReactDOM.render((
<Router history="{history}">
<Route path="/" component={App}>
<Route path="about" component={About} />
<Route path="inbox" component={Inbox}>
<Route path="messages/:id" component={Message} />
</Route>
</Route>
</Router>
),
document.getElementById('app-root'));
When I open the document I get these errors
Warning: Failed prop type: Invalid prop history of type string
supplied to Router, expected object.
I logged history before that and it looks like an object
Uncaught Error: You have provided a history object created with history v4.x or v2.x and earlier. This version of React Router is only
compatible with v3 history objects. Please change to history v3.x.
I have installed react-router#3 along with history#3, I can confirm
+-- react-router#3.0.2 extraneous
I can't find history in the list but if I go to the directory I can see the package.json
"version": "3.3.0"

Remove "" sign from history
<Router history={history}>

React-router not rendering Component

This is a sample code I'm trying to implement. But I can't find the reason why react is not rendering the component. I am including react-router from CDN. Please Help
import { Router, Route, Link, browserHistory } from 'react-router'
var HomePage = React.createClass({
render:function(){
return(
<div>
<h1>Hi World</h1>
</div>
);
}
});
ReactDOM.render(
<Router history={browserHistory}>
<Route path='/home' component={HomePage} />
</Router>
,document.getElementById('mydiv')
);

try to use hashHistory, jsbin example with CDN.
Example with imports
browserHistory requires additional configuration on the server side to serve up URLs.
var ReactRouter = window.ReactRouter;
var Route = ReactRouter.Route;
var Router = ReactRouter.Router;
var Link = ReactRouter.Link;
var hashHistory = ReactRouter.hashHistory;
var HomePage = React.createClass({
render:function(){
return(
<div>
<h1>Hi World</h1>
</div>
);
}
});
ReactDOM.render(
<Router history={hashHistory}>
<Route path='/home' component={HomePage} />
</Router>
,document.getElementById('mydiv')
);

React Router only recognises index route

I have 2 routes, / and /about and i've tested with several more. All routes only render the home component which is /.
When I try a route that doesn't exist it recognises that fine and displays the warning
Warning: No route matches path "/example". Make sure you have <Route path="/example"> somewhere in your routes
App.js
import React from 'react';
import Router from 'react-router';
import { DefaultRoute, Link, Route, RouteHandler } from 'react-router';
import {Home, About} from './components/Main';
let routes = (
<Route name="home" path="/" handler={Home} >
<Route name="about" handler={About} />
</Route>
);
Router.run(routes, function (Handler) {
React.render(<Handler/>, document.body);
});
./components/Main
import React from 'react';
var Home = React.createClass({
render() {
return <div> this is the main component </div>
}
});
var About = React.createClass({
render(){
return <div>This is the about</div>
}
});
export default {
Home,About
};
I've tried adding an explicit path to about to no avail.
<Route name="about" path="/about" handler={About} />
I've stumbled upon this stackoverflow Q but found no salvation in its answer.
Can anyone shed some light on what might be the problem?

Using ES6 and the newest react-router would look like this:
import React from 'react';
import {
Router,
Route,
IndexRoute,
}
from 'react-router';
const routes = (
<Router>
<Route component={Home} path="/">
<IndexRoute component={About}/>
</Route>
</Router>
);
const Home = React.createClass({
render() {
return (
<div> this is the main component
{this.props.children}
</div>
);
}
});
//Remember to have your about component either imported or
//defined somewhere
React.render(routes, document.body);
On a side note, if you want to match unfound route to a specific view, use this:
<Route component={NotFound} path="*"></Route>
Notice the path is set to *
Also write your own NotFound component.
Mine looks like this:
const NotFound = React.createClass({
render(){
let _location = window.location.href;
return(
<div className="notfound-card">
<div className="content">
<a className="header">404 Invalid URL</a >
</div>
<hr></hr>
<div className="description">
<p>
You have reached:
</p>
<p className="location">
{_location}
</p>
</div>
</div>
);
}
});

Since you've nested About under Home you need to render a <RouteHandler /> component within your Home component in order for React Router to be able to display your route components.
import {RouteHandler} from 'react-router';
var Home = React.createClass({
render() {
return (<div> this is the main component
<RouteHandler />
</div>);
}
});